tutorbookapp/tutorbook

@use 'styles/sizes';
@use 'styles/calendar';
@use 'styles/typography';

$times-width: 50px;
$cell-width: 100px;
$border-color: var(--accents-2);

.textField {
  width: 100%;
}

.menuSurface {
  max-width: min(#{sizes.$page-width-with-margin}, calc(-32px + 100vw));
  overflow: hidden;
  display: flex;
  visibility: hidden;
  flex-direction: column;

  &:global(.mdc-menu-surface--animating-open),
  &:global(.mdc-menu-surface--animating-closed),
  &:global(.mdc-menu-surface--open) {
    visibility: visible;
  }
}

.headerWrapper {
  @include calendar.header-wrapper($times-width);
}

.headers {
  @include calendar.headers($times-width, $cell-width, $border-color) {
    .titleContent {
      margin: 0;
      text-align: center;
      width: 100%;

      .day {
        @include typography.typography('body2');
        font-weight: 500;
        line-height: 32px;
        margin-top: 8px;
      }
    }
  }
}

.headerCells {
  @include calendar.header-cells($times-width, $cell-width, $border-color);
}

.gridWrapper {
  @include calendar.grid(
    $times-width,
    $cell-width,
    $border-color,
    $max-height: calc(48px * 8 + 24px)
  );
}