@use '../common/var' as *;
@use '../mixins/mixins' as *;

@include b(date-table) {
  user-select: none;
  display: table;
  margin: 0;

  @include when(week-mode) {
    .#{$namespace}-date-table__row {
      &:hover:not(.current) {
        .#{$namespace}-date-table-cell {
          background-color: getCssVar('color-primary-1');
        }

        td.available {
          color: getCssVar('color-primary-3');
        }

        td.today::after {
          background-color: getCssVar('color-primary-3');
        }

        td:first-child .#{$namespace}-date-table-cell {
          border-top-left-radius: 18px;
          border-bottom-left-radius: 18px;
        }

        td:last-child .#{$namespace}-date-table-cell {
          border-top-right-radius: 18px;
          border-bottom-right-radius: 18px;
        }
      }

      &.current {
        .#{$namespace}-date-table-cell,
        .#{$namespace}-date-table-cell__text {
          background-color: getCssVar('color-primary-3');
          color: getCssVar('color-white');
        }
      }
    }
  }

  tr,
  th,
  td {
    border: none !important;
  }

  tr {
    background-color: transparent !important;
  }

  td {
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 1px 0;

    @include b(date-table-cell) {
      height: 36px;
      width: 36px;
      padding: 2px;
      box-sizing: border-box;
      position: relative;

      @include b(date-table-cell__text) {
        padding: 8px;
        width: 32px;
        height: 32px;
        display: block;
        margin: 0 auto;
        font-size: 12px;
        line-height: 16px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
      }
    }

    &.next-month,
    &.prev-month {
      color: getCssVar('color-neutral-6');
    }

    &.today {
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 6px;
        left: 50%;
        margin-left: -2px;
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background-color: getCssVar('color-neutral-9');
      }

      .#{$namespace}-date-table-cell__text {
        font-weight: 600;
      }

      &.start-date,
      &.end-date {
        .#{$namespace}-date-table-cell__text {
          color: getCssVar('color-white');
          background-color: getCssVar('color-primary-3');
        }

        &::after {
          background-color: getCssVar('color-white');
        }
      }
    }

    &.available:not(.selected):not(.current):not(.in-range):hover {
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-primary-3');
        background-color: getCssVar('color-primary-1');
        cursor: pointer;
      }

      &.today::after {
        background-color: getCssVar('color-primary-3');
      }
    }

    &.in-range {
      .#{$namespace}-date-table-cell,
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-primary-3');
        background-color: getCssVar('color-primary-1');
      }

      &:not(.start-date):not(.end-date).today::after {
        background-color: getCssVar('color-primary-3');
      }
    }

    &.current:not(.disabled) {
      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-white');
        background-color: getCssVar('color-primary-3');
      }
      &:focus-visible {
        .#{$namespace}-date-table-cell__text {
          outline: 2px solid getCssVar('color-primary-3');
          outline-offset: 1px;
        }
      }

      &.today::after {
        background-color: getCssVar('color-white');
      }
    }

    &.start-date,
    &.end-date {
      .#{$namespace}-date-table-cell {
        background-color: getCssVar('color-primary-1');
      }

      .#{$namespace}-date-table-cell__text {
        color: getCssVar('color-white');
        background-color: getCssVar('color-primary-3');
      }
    }

    &.start-date .#{$namespace}-date-table-cell {
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
    }

    &.end-date .#{$namespace}-date-table-cell {
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
    }

    &.disabled .#{$namespace}-date-table-cell {
      background-color: transparent;
      opacity: 1;
      cursor: not-allowed;
      color: getCssVar('color-neutral-5');
    }

    &.selected .#{$namespace}-date-table-cell__text {
      background-color: getCssVar('color-primary-3');
      color: getCssVar('color-white');
      border-radius: 16px;
    }

    &.week {
      font-size: 80%;
      color: getCssVar('color-neutral-9');
    }

    &:focus {
      outline: none;
    }
  }

  th {
    padding: 16px 0 8px;
    color: getCssVar('color-neutral-6');
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
  }
}