tutorbookapp/tutorbook

@use '@material/elevation';
@use 'styles/typography';
@use 'styles/common';

.wrapper {
  @include common.wrapper;
  padding: 48px 24px;

  // TODO: Why is this flex display needed to properly size the no results
  // placeholder? It's what makes it work in the users dashboard...
  display: flex;
  flex-direction: column;

  $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;

    .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');
        }
      }
    }
  }

  .results {
    border-left: 1px solid var(--accents-2);
    border-right: 1px solid var(--accents-2);
    overflow: hidden;
    min-height: 625px;

    .empty {
      margin: 0;
      padding: 24px;
      height: 100%;
    }
  }
}