tutorbookapp/tutorbook

@use 'sass:map';
@use 'styles/typography';

$filters-height: 56px;

.filters {
  height: $filters-height;
  border: 1px solid var(--accents-2);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .filtersButton {
      margin-left: ($filters-height - 48px) / 2;
    }

    .filterChips {
      flex-wrap: nowrap;
    }
  }

  .right {
    display: flex;
    align-items: center;

    .searchField {
      $margin: 10px;
      height: $filters-height - $margin * 2;
      margin-right: $margin;

      &:not(:global(.mdc-text-field--focused)):not(:global(.mdc-text-field--invalid)) {
        :global(.mdc-notched-outline__leading),
        :global(.mdc-notched-outline__notch),
        :global(.mdc-notched-outline__trailing) {
          border-color: var(--accents-2) !important;
        }
      }

      input {
        @include typography.typography('body2');
      }
    }
  }
}