digitransit-ui/app/component/embedded/embedded-search-generator.scss

.embedded-search-generator {
  font-family: $font-family;
  margin: auto;

  fieldset {
    max-width: 350px;
    border: none;

    legend {
      background: none;
    }
  }

  form {
    background: #f2f5f7;
    border-radius: 5px;
    padding: 60px;

    input[type='checkbox'],
    input[type='radio'] {
      accent-color: $primary-color;
      border: 1px solid #888;
      box-sizing: border-box;
      width: 24px;
      height: 24px;
    }

    #embedded-search-width {
      width: 314px;
      height: 44px;
      background: #fff;
      border: 1px solid #888;
      box-sizing: border-box;
      border-radius: 5px;
      font-size: 16px;
    }

    .location-search-wrapper {
      margin: 10px 0;
      padding: 0 20px;
      max-width: 320px;
    }

    .code-label {
      margin-top: 20px;
      border: 1px solid #ddd;
      width: fit-content;
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      height: fit-content;
      font-size: 14px;
      line-height: 17px;

      p {
        margin: 5px 5px 5px 10px;
      }

      #code {
        border-top: 1px solid #ddd;
        background: white;
        margin: 0;
        max-width: 480px;
      }
    }

    .embedded-search-container {
      margin: 10px 0;
      border-radius: 10px;
      border: 1px solid #c4c4c4;
      background: white;

      .control-panel-container {
        // So that the preview autosuggest inputs dont appear on top of the origin/destination selection
        input[id='origin'],
        input[id='destination'] {
          z-index: -10;
        }

        &
          > div:first-of-type
          > div:first-of-type
          :nth-of-type(2)
          > div:first-of-type {
          z-index: 1;
        }

        & > div:first-of-type > div:first-of-type :nth-of-type(3) {
          z-index: 0;
        }

        &
          > div:first-of-type
          > div:first-of-type
          :nth-of-type(5)
          > div:first-of-type {
          z-index: 1;
        }
      }
    }
  }

  h1,
  h2,
  h3,
  label {
    font-family: $heading-font-family;
    letter-spacing: $letter-spacing;
    color: $black;
  }

  h1,
  h2,
  h3 {
    font-weight: $font-weight-medium;
  }

  #embed-form-heading {
    font-size: 36px;
    line-height: 44px;
  }

  h2 {
    font-size: 24px;
    line-height: 29px;
  }

  h3 {
    font-size: 18px;
    line-height: 22px;
  }

  label {
    display: flex;
    font-size: 16px;
    line-height: 24px;

    span {
      align-self: center;
      margin-left: 14px;
      height: 28px;
      white-space: nowrap;
    }
  }

  .embed-preview,
  fieldset {
    margin: 1.125rem 0;
    padding: 1.125rem 0 1.125rem 0;
  }

  .embed-preview {
    pointer-events: none;
    user-select: none;
  }
}

.mobile.embedded-search-generator {
  margin: 15px;

  form {
    padding: 5px;

    #embedded-search-width {
      width: auto;
      min-width: 50%;
    }

    label {
      span {
        white-space: normal;
      }
    }

    #embedded-root {
      width: auto;
    }
  }
}