@import '~styles/mixins';
@import '~styles/common';

.HeaderSearchForm {
  .inline {
    display: flex;
    align-items: center;
    &.spacing {
      margin-top: 30px;
    }
    @include tablet {
      display: block;
    }
  }

  .types {
    align-items: flex-start;
    @include tablet {
      display: none;
    }
    > * {
      width: auto;
      margin-right: 30px;
    }
    .label {
      font-weight: 700;
      font-size: 20px;
      &.active {
        color: $color-green;
        // border-bottom: solid 2px $color-green;
      }
    }
  }

  .filter-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;

    .filter-item {
      width: 30%;
      &.full {
        width: 100%;
      }
      .filter-field {
        border-left: none;
        border-radius: 0;
        .filter-field-content {
          height: 70px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          @include tablet {
            height: auto;
          }
        }
        .content-wrapper-custom {
          display: none;
        }
      }
      &:first-child {
        .filter-field {
          border-left: $border_width solid $color_border;
          border-radius: 50px 0 0 50px;
          padding-left: 20px;
        }
      }
      &.hour {
        width: 20%;
      }
      &:last-child {
        .filter-field {
          border-radius: 0 50px 50px 0;
        }
      }
    }
    @include tablet {
      display: block;
      .filter-item {
        width: 100% !important;

        margin-bottom: 10px;
        .filter-field {
          border-left: $border_width solid $color_border;
          border-radius: 50px !important;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
    }
  }
  .button {
    flex-shrink: 0;
    width: auto;
    margin-left: 30px;
    @include tablet {
      margin-left: 0;
      width: 100%;
    }
  }
}
