date-picker.css

@import "../global/variables.css";
@import "../global/global.css";

@value cellSize: calc(var(--ring-unit) * 3);
@value calHeight: calc(var(--ring-unit) * 36);
@value calWidth: calc(var(--ring-unit) * 37);
@value yearHeight: calc(var(--ring-unit) * 4);
@value yearWidth: calc(var(--ring-unit) * 6);

:root {
  /* stylelint-disable-next-line color-no-hex */
  --ring-date-picker-hover-color: #b3dfff;
}

.container {
  display: inline-block;
}

.hoverable {
  cursor: pointer;
  transition: color 0.2s ease-out 0s;
}

.hoverable:hover {
  transition: none;

  color: var(--ring-link-hover-color);
}

.datePicker.datePicker {
  padding-right: var(--ring-unit);

  &.inline {
    padding: 0;
  }

  &.sizeS {
    width: calc(var(--ring-unit) * 12);
  }

  &.sizeM {
    width: calc(var(--ring-unit) * 30);
  }

  &.sizeL {
    width: calc(var(--ring-unit) * 50);
  }

  &.sizeFULL {
    width: 100%;
  }

  &.sizeAUTO {
    max-width: 100%;
  }
}

.displayDate {
  display: inline-block;

  min-width: calc(var(--ring-unit) * 11);

  text-align: left;
}

.displayDate.displayRange {
  min-width: calc(var(--ring-unit) * 22);
}

.clear {
  cursor: pointer;
  transition: opacity var(--ring-ease);

  opacity: 0.3;
}

.datePicker:hover .clear {
  opacity: 0.5;
}

.datePicker .clear:hover {
  transition: none;

  opacity: 1;
}

.datePopup {
  width: min-content;

  user-select: none;
  text-align: left;

  color: var(--ring-text-color);
}

.datePopup * {
  box-sizing: border-box;
}

.filterWrapper {
  composes: filterWrapper from "../select/select-popup.css";

  display: flex;

  padding-left: calc(var(--ring-unit) * 2);
}

.filter {
  composes: filter from "../select/select-popup.css";
}

.calendarIcon {
  margin-right: calc(var(--ring-unit) / 2);

  color: var(--ring-icon-color);
}

.anchor {
  width: 100%;
  padding: 0 var(--ring-unit);

  text-align: start;
  white-space: nowrap;

  .inline & {
    min-width: initial;
    padding: 0;

    cursor: pointer;
  }
}

.anchorContent {
  display: flex;
  align-items: baseline;
}

.chevronDownIcon {
  margin-left: auto;

  color: var(--ring-icon-secondary-color);
}

.fromInput {
  position: relative;

  flex-basis: calc(var(--ring-unit) * 13);
  flex-grow: 0;
  flex-shrink: 0;
}

.fromInputWithDivider {
  &::after {
    position: absolute;
    top: 0;
    right: var(--ring-unit);

    content: "—";

    line-height: calc(4 * var(--ring-unit) - 2px);
  }
}

.toInput {
  flex-basis: calc(var(--ring-unit) * 13);
  flex-grow: 1;
  flex-shrink: 0;

  width: calc(var(--ring-unit) * 13);
}

.dateInput {
  flex-basis: calc(var(--ring-unit) * 11);
  flex-grow: 1;
  flex-shrink: 0;
}

.timeInputWithDivider {
  position: relative;

  &::before {
    position: absolute;
    left: calc(-1 * var(--ring-unit));

    content: ",";

    line-height: calc(4 * var(--ring-unit) - 3px);
  }
}

.weekdays {
  height: calc(var(--ring-unit) * 4);
  padding: 5px calc(var(--ring-unit) * 2) 0;

  color: var(--ring-secondary-color);
}

.weekday.weekday {
  display: inline-block;

  width: cellSize;

  text-align: center;
  text-transform: capitalize;
}

.weekend.weekend {
  color: var(--ring-error-color);
}

.calendar {
  position: relative;

  overflow: hidden;

  width: calWidth;
  height: calHeight;

  box-shadow: 0 -1px var(--ring-line-color);
}

.months.months {
  position: absolute;
  top: 0;
  right: yearWidth;
  bottom: 0;
  left: 0;
}

.days {
  position: relative;
  left: 0;
}

.month.month {
  display: flex;
  flex-wrap: wrap;

  width: calc(var(--ring-unit) * 21);
  margin: calc(var(--ring-unit) * 2);
}

.month.month > * {
  flex-shrink: 0;

  height: cellSize;

  line-height: cellSize;
}

.monthTitle {
  /* IE workaround, see https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box */

  width: calc(var(--ring-unit) * 12);

  padding-left: calc(var(--ring-unit) * 0.5);

  text-align: left;

  text-transform: capitalize;

  font-weight: bold;

  @supports (flex-basis: 1px) {
    flex-basis: calc(var(--ring-unit) * 12);

    width: auto;
  }
}

.day {
  composes: resetButton from "../global/global.css";
}

.day.day {
  position: relative;

  flex-basis: cellSize;

  margin: 0;

  cursor: pointer;
  transition: background-color var(--ring-ease), color var(--ring-ease);
  text-align: center;

  &::before,
  &::after {
    pointer-events: none;
  }
}

.between.between {
  transition: none;

  background-color: var(--ring-selected-background-color);
}

.activeBetween.activeBetween {
  transition: none;

  background-color: var(--ring-date-picker-hover-color);
}

.current.current {
  color: var(--ring-white-text-color);
  border-radius: var(--ring-border-radius);
  background-color: var(--ring-main-color);
}

.active.active {
  transition: none;

  color: var(--ring-link-hover-color);
  border-radius: var(--ring-border-radius);
  background-color: var(--ring-date-picker-hover-color);
}

.disabled.disabled {
  cursor: not-allowed;

  color: var(--ring-disabled-color);
}

.from.from {
  border-radius: var(--ring-border-radius) 0 0 var(--ring-border-radius);
}

.to.to {
  border-radius: 0 var(--ring-border-radius) var(--ring-border-radius) 0;
}

.from.to {
  border-radius: var(--ring-border-radius);
}

.Day1 {
  position: relative;

  &::before,
  &::after {
    position: absolute;

    width: calc(var(--ring-unit) * 2);
    height: 100%;

    content: "";
    transition: background-color var(--ring-ease);
  }

  &::before {
    right: 100%;
  }

  &::after {
    bottom: 100%;
    left: 700%;
  }

  &.spread {
    &::before,
    &::after {
      transition: none;

      background-color: var(--ring-selected-background-color);
    }
  }

  &.activeSpread {
    &::before,
    &::after {
      transition: none;

      background-color: var(--ring-date-picker-hover-color);
    }
  }
}

.first {
  position: relative;

  &::before,
  &::after {
    position: absolute;
    z-index: var(--ring-invisible-element-z-index);

    width: calc(var(--ring-unit) * 23);
    height: calc(var(--ring-unit) * 8);

    content: "";
    transition: background-color var(--ring-ease);
  }

  &::before {
    right: 100%;
    bottom: 0;
  }

  &::after {
    bottom: 100%;
    left: 0;
  }

  &.Day1 {
    &::after {
      height: calc(var(--ring-unit) * 5);
    }
  }

  & + .Day2 {
    position: relative;

    &::before {
      position: absolute;
      z-index: var(--ring-invisible-element-z-index);
      top: calc(var(--ring-unit) * -8);
      left: 600%;

      width: calc(var(--ring-unit) * 2);
      height: 100%;

      content: "";
      transition: background-color var(--ring-ease);
    }
  }
}

.Day5,
.Day6,
.Day7 {
  &::before,
  &::after {
    height: calc(var(--ring-unit) * 5);
  }
}

.spread {
  &::before,
  &::after,
  & + .Day2::before {
    transition: none;

    background-color: var(--ring-selected-background-color);
  }
}

.activeSpread {
  &::before,
  &::after,
  & + .Day2::before {
    transition: none;

    background-color: var(--ring-date-picker-hover-color);
  }
}

.empty.empty {
  pointer-events: none;

  opacity: 0;
}

.today.today {
  position: relative;

  font-weight: bold;
}

.today::before {
  position: absolute;
  top: 0;
  left: calc(var(--ring-unit) * 0.5);

  content: "•";

  font-size: var(--ring-font-size-smaller);
}

.day > .today::before {
  top: 4px;
  left: 0;

  width: 100%;

  text-align: center;
}

.year.today::before {
  top: -1px;
  left: 2px;
}

.monthNames {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: calc(var(--ring-unit) * 6);

  background-color: var(--ring-content-background-color);
  box-shadow: -1px 0 var(--ring-line-color);
}

.monthName {
  composes: hoverable;
  composes: resetButton from "../global/global.css";
}

.monthName.monthName {
  position: relative;

  width: 100%;

  height: cellSize;
  padding-left: calc(var(--ring-unit) * 1.5);

  text-transform: capitalize;

  line-height: cellSize;
}

.monthSlider {
  composes: resetButton from "../global/global.css";
}

.monthSlider.monthSlider {
  position: absolute;
  z-index: var(--ring-fixed-z-index);
  right: 0;
  left: -1px;

  width: calc(100% + 1px);

  height: calc(var(--ring-unit) * 6);

  cursor: grab;

  opacity: 0.17;
  background-color: var(--ring-main-color);
}

.monthSlider:hover {
  opacity: 0.3;
}

.dragging {
  cursor: grabbing;

  opacity: 0.35;
}

.range {
  position: absolute;
  left: 0;

  width: 2px;

  background-color: var(--ring-main-color);
}

.years {
  position: absolute;
  top: 0;
  right: 0;

  width: yearWidth;

  background-color: var(--ring-content-background-color);
  box-shadow: -1px 0 var(--ring-line-color);

  font-size: var(--ring-font-size-smaller);
}

.year {
  composes: hoverable;
  composes: resetButton from "../global/global.css";
}

.year.year {
  position: relative;

  width: 100%;

  height: yearHeight;

  text-align: center;

  color: var(--ring-secondary-color);

  line-height: yearHeight;
}

.currentYear.currentYear {
  cursor: auto;
  transition: none;

  color: var(--ring-text-color);
}

.currentYear:hover {
  color: var(--ring-text-color);
}