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

@include b(month-table) {
  margin: 16px 0 0;
  display: table;

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

  tr {
    background-color: transparent !important;
  }

  td {
    position: relative;
    padding: 1px 0;

    @include e(cell) {
      height: 48px;
      padding: 8px 0;
      text-align: center;
      font-size: 12px;
      line-height: 32px;
      color: getCssVar('color-neutral-9');
      box-sizing: border-box;
      border-radius: 12px;
    }

    &.today {
      .#{$namespace}-month-table__cell {
        font-weight: 600;

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

      &.start-date,
      &.end-date {
        .#{$namespace}-month-table__cell {
          color: getCssVar('color-white');

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

    &.disabled .#{$namespace}-month-table__cell {
      background-color: transparent;
      cursor: not-allowed;
      color: getCssVar('color-neutral-5');

      &:hover {
        color: getCssVar('color-neutral-5');
      }
    }

    &.in-range {
      .#{$namespace}-month-table__cell {
        color: getCssVar('color-primary-3');
        background-color: getCssVar('color-primary-1');

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

      &:not(.start-date):not(.end-date) {
        .#{$namespace}-month-table__cell {
          border-radius: 0;
        }
      }
    }

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

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

    &.start-date:not(.end-date) {
      .#{$namespace}-month-table__cell {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &.end-date:not(.start-date) {
      .#{$namespace}-month-table__cell {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &.current:not(.disabled) {
      @include e(cell) {
        color: getCssVar('color-white');
        background-color: getCssVar('color-primary-3');

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

    &:focus-visible {
      outline: none;

      @include e(cell) {
        outline: 2px solid getCssVar('color-primary-3');
      }
    }

    &:not(.disabled):not(.current):not(.in-range) {
      @include e(cell) {
        &:hover {
          background-color: getCssVar('color-primary-1');
          color: getCssVar('color-primary-3');
          cursor: pointer;

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