_calendar.scss

// stylelint-disable selector-max-class
@use "functions/escape-svg" as *;
@use "mixins/breakpoints" as *;
@use "mixins/border-radius" as *;
@use "mixins/ltr-rtl" as *;
@use "mixins/transition" as *;
@use "variables" as *;

.calendar {
  // scss-docs-start calendar-css-vars
  --#{$prefix}calendar-table-margin: #{$calendar-table-margin};
  --#{$prefix}calendar-table-cell-size: #{$calendar-table-cell-size};
  --#{$prefix}calendar-nav-padding: #{$calendar-nav-padding};
  --#{$prefix}calendar-nav-border-color: #{$calendar-nav-border-color};
  --#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid var(--#{$prefix}calendar-nav-border-color);
  --#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color};
  --#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
  --#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};
  --#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height};
  --#{$prefix}calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
  --#{$prefix}calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
  --#{$prefix}calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
  --#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
  --#{$prefix}calendar-nav-icon-color: #{$calendar-nav-icon-color};
  --#{$prefix}calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
  --#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
  --#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color};
  --#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
  --#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
  --#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
  --#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};
  --#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
  --#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};
  --#{$prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
  --#{$prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
  --#{$prefix}calendar-cell-today-color: #{$calendar-cell-today-color};
  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
  // scss-docs-end calendar-css-vars

  font-weight: initial;

  table {
    width: calc(var(--#{$prefix}calendar-table-cell-size) * 7); // stylelint-disable-line function-disallowed-list
    margin: var(--#{$prefix}calendar-table-margin);

    th,
    td {
      width: var(--#{$prefix}calendar-table-cell-size);
    }
  }

  &.months ~ .time-picker,
  &.years ~ .time-picker {
    display: none;
  }

  @include media-breakpoint-down(sm) {
    &:not(:first-child) .calendar-nav {
      border-top: var(--#{$prefix}calendar-nav-border);
    }
  }
}

.show-week-numbers table {
  width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list
}

.calendars {
  display: flex;
  flex-basis: min-content;

  @include media-breakpoint-down(sm) {
    flex-wrap: wrap;
  }
}

.calendar-nav {
  display: flex;
  align-items: baseline;
  padding: var(--#{$prefix}calendar-nav-padding);
  border-bottom: var(--#{$prefix}calendar-nav-border);
}

.calendar-nav-date {
  flex: 1;
  text-align: center;

  .btn {
    font-weight: 600;
    color: var(--#{$prefix}calendar-nav-date-color);

    &:hover {
      color: var(--#{$prefix}calendar-nav-date-hover-color);
    }
  }
}

.calendar-nav-icon {
  display: block;
  width: var(--#{$prefix}calendar-nav-icon-width);
  height: var(--#{$prefix}calendar-nav-icon-height);
  background-color: var(--#{$prefix}calendar-nav-icon-color);
  @include transition(background-image .15s ease-in-out);

  &:hover {
    background-color: var(--#{$prefix}calendar-nav-icon-hover-color);
  }
}

.calendar-nav-icon-double-next {
  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center);
}

.calendar-nav-icon-double-prev {
  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center);
}

.calendar-nav-icon-next {
  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-prev) no-repeat center);
}

.calendar-nav-icon-prev {
  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-next) no-repeat center);
}

.calendar-header-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--#{$prefix}calendar-table-cell-size);
  font-weight: 600;
  color: var(--#{$prefix}calendar-cell-header-inner-color);
}

.calendar-cell-week-number {
  font-weight: 600;
  color: var(--#{$prefix}calendar-cell-week-number-color);
}

.calendar-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--#{$prefix}calendar-table-cell-size);
}

.calendar-row,
.calendar-cell {
  text-align: center;

  &.disabled .calendar-cell-inner,
  &.next .calendar-cell-inner,
  &.previous .calendar-cell-inner {
    color: var(--#{$prefix}calendar-cell-disabled-color);
    cursor: not-allowed;
  }

  &.range .calendar-cell-inner {
    position: relative;

    &::after {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      background: var(--#{$prefix}calendar-cell-range-bg);
    }
  }

  &.range-hover .calendar-cell-inner {
    position: relative;

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      border-top: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
      border-bottom: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
      @include border-radius(0);
    }
  }

  &.selected:not(th, .next, .previous) .calendar-cell-inner {
    color: var(--#{$prefix}calendar-cell-selected-color);
    background-color: var(--#{$prefix}calendar-cell-selected-bg);
  }

  &.today .calendar-cell-inner {
    color: var(--#{$prefix}calendar-cell-today-color);
  }
}

.calendar-cell {
  padding: 1px 0;

  .calendars:not(.select-week) &:not(.disabled, .next, .previous):hover,
  .calendars:not(.select-week) &.clickable:hover {
    .calendar-cell-inner {
      color: var(--#{$prefix}calendar-cell-hover-color);
      cursor: pointer;
      background-color: var(--#{$prefix}calendar-cell-hover-bg);
      @include border-radius($border-radius);
    }
  }

  .calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after {
    @include border-start-radius-flex($border-radius);
  }

  .calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after {
    @include border-end-radius-flex($border-radius);
  }

  &.range-hover:first-of-type,
  &:not(.range-hover) + &.range-hover {
    .calendar-cell-inner::before {
      border-inline-start: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
      @include border-start-radius-flex($border-radius);
    }
  }

  &.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before {
    border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
    @include border-end-radius-flex($border-radius);
  }

  // stylelint-disable-next-line at-rule-no-vendor-prefix
  @-moz-document url-prefix() {
    .calendars:not(.select-week) &:nth-last-child(1 of .range),
    .calendars:not(.select-week) &:nth-last-child(1 of .available) {
      .calendar-cell-inner::after {
        @include border-end-radius-flex($border-radius);
      }
    }

    &:nth-last-child(1 of .range-hover) .calendar-cell-inner::before {
      border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
      @include border-end-radius-flex($border-radius);
    }
  }

  &.selected:not(th) .calendar-cell-inner {
    @include border-radius($border-radius);
  }

  .calendars:not(.select-week) &:focus-visible {
    outline: 0;

    .calendar-cell-inner {
      box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);
      @include border-radius($border-radius);
    }
  }
}

.calendar-row {
  .calendars.select-week &:not(.disabled):hover,
  .calendars.select-week &.clickable:hover {
    .calendar-cell-inner {
      color: var(--#{$prefix}calendar-cell-hover-color);
      cursor: pointer;
      background-color: var(--#{$prefix}calendar-cell-hover-bg);
    }
  }

  .selected:not(th) .calendar-cell-inner {
    @include border-radius($border-radius);
  }

  .calendar-cell:first-of-type .calendar-cell-inner {
    @include border-start-radius-flex($border-radius);
    &::before,
    &::after {
      @include border-start-radius-flex($border-radius);
    }
  }

  .calendar-cell:last-of-type .calendar-cell-inner {
    @include border-end-radius-flex($border-radius);
    &::before,
    &::after {
      @include border-end-radius-flex($border-radius);
    }
  }

  &.range-hover .calendar-cell:first-of-type .calendar-cell-inner::before {
    border-inline-start: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
  }

  &.range-hover .calendar-cell:last-of-type .calendar-cell-inner::before {
    border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
  }

  &:focus-visible {
    outline: 0;
    box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);
    @include border-radius($border-radius);
  }
}