@import "../common/var";
@import "../mixins/mixins";

@include b(date-table) {
  font-size: $--font-size-base;
  user-select: none;

  @include when(week-mode) {
    .xb-date-table__row {
      &:hover {
        td.available:hover {
          color: $--color-black-65;
        }
        td:first-child div {
          margin-left: 5px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
        td:last-child div {
          margin-right: 5px;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
        }
      }

      &.current span {
        color: $--color-white;
        @include theme-bg-color;
        &:hover{
          color: $--color-white;
        }
      }
    }
  }

  td {
    width: 32px;
    height: 24px;
    padding: 3px 0;
    text-align: center;
    cursor: pointer;
    position: relative;

    & div {
      height: 24px;
    }

    & span {
      width: 24px;
      height: 24px;
      display: block;
      margin: 0 auto;
      line-height: 24px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $--border-radius-2;
    }

    &.today {
      position: relative;
      border-radius: $--border-radius-2;
      span{
        border:1px solid transparent;
        @include date-today-border-color;
        @include theme-font-color;
        font-weight: $--font-weight-base;
      }
    }
    &.today.end-date, &.today.start-date{
      span{
        color: $--color-white;
        font-weight: $--font-weight-normal;
      }
    }

    &.available span:hover{
      border-radius: $--border-radius-2;
      @include date-available-hover-bg-color;
      @include date-available-hover-font-color;
    }

    &.in-range div {
      @include date-available-hover-bg-color;
    }

    &.current:not(.disabled) span {
      color: $--color-white;
      @include theme-bg-color;
      &:hover{
        color: $--color-white;
      }
    }

    &.start-date, &.end-date{
      div{
        color: $--color-white;
        font-weight: $--font-weight-normal;
        [data-theme*="-symbol"] & {
          background-color:$--color-white;
        }
        span{
          @include theme-bg-color;
          &:hover{
            @include theme-bg-color;
            [data-theme*="-symbol"] & {
              color: $--color-white;
            }
          }
        }
      }
    }

    &.start-date + .in-rang{
      div{
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }
    }

    &.end-date div {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    &.next-month,
    &.prev-month,
    &.disabled {
      color: $--color-black-25;
    }

    &.disabled div {
      cursor: not-allowed;
    }

    &.selected div {
      margin-left: 5px;
      margin-right: 5px;
      @include date-available-hover-bg-color;
      border-radius: $--border-radius-2;
      @include date-available-hover-font-color;
    }

    &.selected span,&.selected span:hover {
      color: $--color-white;
      border-radius: $--border-radius-2;
      @include theme-bg-color;
    }

    &.week {
      font-size: 80%;
      color: $--color-black-65;
    }
  }

  th {
    padding: 5px;
    color: $--color-black-65;
    font-weight: $--font-weight-normal;
  }
}