@import '@/recruits/assets/styles/extends.scss';

@mixin SearchBar {
  &-SearchBlock {
    display: flex;
    margin-bottom: 8px
  }

  &-Search {
    flex: 1;
    padding-right:4px;
  }

  &-FilterIcon {
    color: #1491cf;
    border-radius: 24px;
  }

  &-FilterCount {
    top: 2px;
    right: 10px;
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    border-radius: 50%;
  }

  &-Card {
    background: #eef2f6;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 0 0 8px 8px;
  }

  &-InputBlock {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 8px;

    @media screen and (max-width: 1280px) {
      grid-template-columns: 1fr;
    }
  }

  &-CloseButton {
    font-family: 'Golos UI', sans-serif;
    font-weight: 400;
    color: #cf5f14;
    padding-right: 4px;
    position: absolute;
    top: 0;
    right: 0;
  }

  &-AcceptBlock {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    height: auto;
    width: 100%;
  }

  &-AcceptBtn {
    text-transform: capitalize;
    @extend %redesigned-btn;
  }


  //Для всех инпутов
  ::v-deep {
    .q-field__control {
      font-family: 'Golos Text', sans-serif;
      background: #e5edf5 !important;
    }
    .q-field--outlined .q-field__control:before {
      border: none;
    }
    .q-field:not(.q-field--focused) {
      .q-field__control {
        border-bottom: 1px solid rgba(1, 72, 116, 0.18);
      }
    }
  }
}