.q-date-table {
  width: 100%;
  font-size: 10px;
  table-layout: fixed;
  user-select: none;

  &__days {
    font-weight: var(--font-weight-base);
    line-height: 1;
    color: rgb(var(--color-rgb-gray) / 64%);
  }

  &__cell-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    text-align: center;
    cursor: pointer;
  }

  .cell {
    position: relative;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0 auto;
    font-weight: var(--font-weight-base);
    color: var(--color-primary-blue);
    background-color: var(--color-tertiary-gray-light);
    border: none;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-secondary);

    &:hover {
      &:not(.cell_disabled):not(.cell_current):not(.cell_in-range) {
        color: var(--color-primary-black);
        background-color: var(--color-tertiary-gray);
      }
    }

    &[data-focus-visible-added] {
      &:not(.cell_disabled) {
        color: var(--color-tertiary-white);
        background-color: var(--color-primary-blue);
        box-shadow: var(--box-shadow-pressed);
        transition: transform 0.2s;
        transform: scale(1.2);
      }
    }

    &_disabled {
      color: rgb(var(--color-rgb-gray) / 64%);
      cursor: not-allowed;
      background-color: var(--color-tertiary-gray);
      box-shadow: var(--box-shadow-pressed);
      opacity: 1;
    }

    &_selected {
      color: var(--color-tertiary-white);
      background-color: var(--color-primary-blue);
      box-shadow: var(--box-shadow-primary);
    }

    &_today {
      &::before {
        position: absolute;
        top: -4px;
        left: 50%;
        display: block;
        width: 2px;
        height: 2px;
        content: '';
        background-color: var(--color-primary);
        border-radius: 50%;
        transform: translateX(-50%);
      }

      &:not(.cell_disabled) {
        color: var(--color-primary);
      }

      &.cell_current:not(.cell_disabled),
      &.cell_in-range:not(.cell_prev-month),
      &.cell_in-range:not(.cell_next-month) {
        color: var(--color-tertiary-white);
      }
    }

    &_current:not(.cell_disabled),
    &_in-range:not(.cell_disabled) {
      color: var(--color-tertiary-white);
      background-color: var(--color-primary-blue);

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: -1;
        width: 20px;
        height: 20px;
        margin: auto;
        content: '';
        border-radius: var(--border-radius-base);
        box-shadow: var(--box-shadow-primary);
      }

      &:hover {
        color: var(--color-tertiary-white);
      }
    }

    &_next-month:not(.cell_disabled),
    &_prev-month:not(.cell_disabled) {
      color: rgb(var(--color-rgb-gray) / 32%);

      &.cell_in-range {
        color: var(--color-primary-black);
        background-color: var(--color-tertiary-gray);
      }
    }
  }
}
