@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-calendar-header-box-shadow: $s-box-shadow-lg !default;
$s-calendar-title-font-size: $s-font-size !default;
$s-calendar-title-line-height: $s-line-height !default;
$s-calendar-week-item-height: 36px !default;
$s-calendar-week-item-font-size: $s-font-size !default;

$s-calendar-month-title-height: 40px !default;
$s-calendar-month-title-font-size: $s-font-size !default;
$s-calendar-month-title-font-weight: 500 !default;
$s-calendar-month-body-row-gap: 4px !default;

$s-calendar-day-height: 56px !default;
$s-calendar-day-active-bg: $s-bg-active !default;
$s-calendar-day-selected-border-radius: $s-border-radius !default;
$s-calendar-day-selected-color: $s-white !default;
$s-calendar-day-selected-bg: $s-primary !default;
$s-calendar-day-middle-opacity: 0.1 !default;

$s-calendar-month-mark-font-size: 160px !default;
$s-calendar-month-mark-color: $s-gray-200 !default;

$s-calendar-body-height: $s-calendar-day-height * 5 +
  $s-calendar-month-body-row-gap * 4 + $s-calendar-month-title-height !default;
// #endvariables

.s-calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.s-calendar-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: none;
  box-shadow: $s-calendar-header-box-shadow;

  @at-root {
    .s-calendar-title {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: $s-calendar-title-font-size;
      line-height: $s-calendar-title-line-height;
    }

    .s-calendar-week {
      display: flex;
      flex-direction: row;

      @at-root {
        .s-calendar-week-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          height: $s-calendar-week-item-height;
          font-size: $s-calendar-week-item-font-size;
        }
      }
    }
  }
}

.s-calendar-body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex: none;
  height: $s-calendar-body-height;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
  }
}

.s-calendar-month {
  display: flex;
  flex-direction: column;

  @at-root {
    .s-calendar-month-title {
      display: flex;
      height: $s-calendar-month-title-height;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: $s-calendar-month-title-font-size;
      font-weight: $s-calendar-month-title-font-weight;
    }
    .s-calendar-month-body {
      position: relative;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-row-gap: $s-calendar-month-body-row-gap;
      grid-column-gap: 0;

      @at-root {
        .s-calendar-day {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          height: $s-calendar-day-height;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          &.s-calendar-day-disabled {
            @include disabled-text;
          }
          &:not(.s-calendar-day-disabled):not(.s-calendar-day-selected):active {
            border-radius: $s-calendar-day-selected-border-radius;
            background-color: $s-calendar-day-active-bg;
          }

          &.s-calendar-day-selected {
            border-radius: $s-calendar-day-selected-border-radius;
            color: $s-calendar-day-selected-color;
            background-color: $s-calendar-day-selected-bg;

            &.s-calendar-day-next-selected,
            &.s-calendar-day-start:not(.s-calendar-day-end) {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            & + .s-calendar-day-selected,
            &.s-calendar-day-end:not(.s-calendar-day-start) {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
          &.s-calendar-day-middle {
            color: $s-primary;
            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              content: '';
              opacity: $s-calendar-day-middle-opacity;
              background-color: currentColor;
            }
          }
        }
        .s-calendar-month-mark {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 0;
          font-size: $s-calendar-month-mark-font-size;
          color: $s-calendar-month-mark-color;
          pointer-events: none;
        }
      }
    }
  }
}