ihk24/gfi-ihk-2024/stories/components/search-form/search-form.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.search-filter-form {
  --search-padding: 28px;
  position: relative;
  margin-bottom: 20px;

  input[type="checkbox"] + label, input[type="radio"] + label {
    max-width: none;
  }

  @media(max-width: 767px) {
    --search-padding: var(--container-padding);
    margin: -10px calc(var(--container-padding) * -1) var(--container-padding);
    padding: var(--container-padding) var(--search-padding) 0;
  }

  h1, h2, .like-h3 {
    margin-top: 0;
    margin-left: 1px;
    line-height: 1;
  }

  fieldset {
    position: relative;
    border: 0;
    padding: 0;

    &:last-child {
      padding-bottom: 32px;
    }
  }

  .toggle-actions {
    padding: 30px 0;

    .btn.open::before {
      @include icon-minus;
    }
  }

  .extendleft, .extend-left {
    @media(max-width: 567px) {
      margin: 15px 2px 2px;
    }
    @media(min-width: 568px) {
      float: right;
      margin-top: -60px;
      margin-right: 10px;
    }
  }

  .search-results-search {
    background-color: var(--color-background);
    padding: 24px var(--search-padding) 0;
    @media(max-width: 567px) {
      display: flex;
      flex-direction: column;

      .toggle-actions {
        order: 1;
        margin-top: 15px;
        padding-bottom: 24px;
      }
    }
  }

  .extended-search {
    display: none;
    background-color: var(--color-background);

    &:before {
      content: "";
      position: relative;
      display: block;
      background-color: var(--swatches-neutrals-white);
      height: 30px;
      margin: 0 calc(var(--search-padding) * -1);

      @media(max-width: 767px) {
        height: 10px;
      }
    }
  }

  .input-row {
    padding: 1em var(--search-padding) 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
  }

  .input-wrapper, .ev-items .ev-filter-wrapper {
    display: flex;

    label {
      margin-bottom: -0.3em;
    }
  }

  .ev-items .ev-filter-wrapper.checkbox-group {
    margin-bottom: -0.5em;
    display: block;

    .ev-filter {
      background-color: transparent;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }

  .ev-search-btn {
    position: relative;
    display: block;
    border-top: 2px solid var(--swatches-neutrals-white);
    padding: 13px 20px 13px 58px;
    cursor: pointer;
    text-decoration: underline;
    @include focus-visible;
    transition: 0.2s ease;

    &::before {
      @include icon-plus;
      font-family: 'Icons', sans-serif;
      position: absolute;
      display: inline-block;
      font-size: 24px;
      line-height: 30px;
      left: calc(var(--search-padding) - 2px);
      top: 50%;
      margin-top: -15px;
      text-decoration: none;
      font-weight: 400;
    }

    @media(max-width: 767px) {
      padding-left: 52px;
      font-size: 18px;
      font-weight: 600;

      &::before {
        left: 18px;
      }
    }

    &.focus-visible:focus {
      z-index: 1;
    }
    &:focus-visible, &.-moz-focusring {
      z-index: 1;
    }

    &.open {
      background-color: var(--color-background);

      &::before {
        @include icon-minus;
      }

      + .ev-filter {
        background-color: var(--color-background);
      }
    }
  }

  .ev-filter {
    display: none;
    background-color: var(--color-background);
    transition: background-color 0.2s ease;
    padding: 0 var(--search-padding) 20px;

    @media(max-width: 767px) {
      padding: 0 18px 18px;
    }
  }

  .ev-filter-wrapper {
    padding: 0.5em 2px;
    margin: 0 -2px;
  }

  .ev-items .ev-filter-wrapper + .ev-filter-wrapper {
    border-top: 1px solid var(--color-surface-inset);
  }

  .row {
    margin: 0 -8px;

    input, select {
      margin-bottom: 0.2em;
    }

    > .ev-filter-wrapper {
      border-top: 0;
      padding: 6px 10px;
      position: relative;
      margin: 0;

      @media(max-width: 567px) {
        flex: 1 1 100%;
        max-width: 100%;

        &.col-sm-3.location {
          flex: 1 1 30%;
          max-width: 30%;
        }
        &.col-sm-6.location {
          flex: 1 1 70%;
          max-width: 70%;
        }
        &.date {
          flex: 1 1 50%;
          max-width: 50%;
        }
      }

      @media(min-width: 568px) {
        &.col-sm-3 {
          flex: 1 1 25%;
          max-width: 25%;
        }
        &.col-sm-6 {
          flex: 1 1 50%;
          max-width: 50%;
        }
        &.col-sm-9 {
          flex: 1 1 75%;
          max-width: 75%;
        }
      }
    }
  }

  .btn-wrapper {
    position: relative;
    padding: 20px var(--search-padding);
    border-top: 2px solid var(--swatches-neutrals-white);

    @media(min-width: 768px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .reset {
      position: relative;
      display: inline-block;
      padding-left: 40px;
      margin-left: -6px;

      @media(max-width: 767px) {
        margin-bottom: 18px;
        margin-left: 1px;
      }

      &:before {
        @include icon-reset;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -14px;
        font-family: "Icons", sans-serif;
        font-size: 30px;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
      }
    }
  }
}