SCalendar {
  display: flex;
  flex-direction: column;
  border-radius: var(--intergalactic-surface-rounded, 6px);

  SCalendarUnit:focus-visible {
    outline: none;
  }
}

SGridDays {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, auto));
  grid-template-rows: repeat(auto-fit, minmax(32px, auto));
}

SGridMonths {
  display: grid;
  grid-row-gap: var(--intergalactic-spacing-2x, 8px);
  grid-template-columns: repeat(3, minmax(60px, auto));
  grid-template-rows: repeat(4, minmax(32px, auto));
}

SWeekDays {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, auto));
}

SWeekDay {
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--intergalactic-text-secondary, #6c6e79);
  font-size: var(--intergalactic-fs-200, 14px);
  font-weight: var(--intergalactic-regular, 400);
  overflow: hidden;
}

SCalendarUnit {
  font-family: inherit;
  font-weight: normal;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  color: var(--intergalactic-text-primary, #191b23);
  box-shadow: none;
  overflow: visible;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--intergalactic-date-picker-cell, #ffffff);

  align-items: center;
  border-radius: var(--intergalactic-control-rounded, 6px);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: var(--intergalactic-fs-200, 14px);
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  position: relative;
  transition: border-radius 0.15s 0.15s;
  outline: none;
  margin: 0;
  margin-top: 4px;

  &:hover {
    color: var(--intergalactic-text-primary, #191b23);
    background-color: var(--intergalactic-date-picker-cell-hover, #e0e1e9);
  }
}

SCalendarUnit[today] {
  &:before {
    content: '';
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
    border-radius: var(--intergalactic-control-rounded, 6px);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    box-sizing: border-box;
    border: 1px solid var(--intergalactic-date-picker-cell-current, #8a8e9b);
  }
}

SCalendarUnit[today]SCalendarUnit[startSelected],
SCalendarUnit[today]SCalendarUnit[endSelected] {
  &:before {
    border-color: var(--intergalactic-border-secondary, #e0e1e9);
  }
}

SCalendarUnit[selected] {
  background-color: var(--intergalactic-date-picker-cell-range, #c4e5fe);
  border-radius: 0;
  transition: border-radius 0s 0s;
  color: var(--intergalactic-text-primary, #191b23);

  &:hover {
    background-color: var(--intergalactic-date-picker-cell-range-hover, #8ecdff);
  }
}

SCalendarUnit[highlighted] {
  background-color: var(--intergalactic-date-picker-cell-range, #c4e5fe);
  border-radius: 0;
  transition: border-radius 0s 0s;
  color: var(--intergalactic-text-primary, #191b23);

  &:hover {
    background-color: var(--intergalactic-date-picker-cell-range-hover, #8ecdff);
  }
}

SCalendarUnit[startSelected] {
  color: var(--intergalactic-text-primary-invert, #ffffff);
  background-color: var(--intergalactic-date-picker-cell-active, #2bb3ff);

  &:not([highlighted]) {
    border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--intergalactic-control-rounded, 6px);
    border-top-right-radius: 0;
  }

  &:hover {
    color: var(--intergalactic-text-primary-invert, #ffffff);
    background-color: var(--intergalactic-date-picker-cell-active-hover, #008ff8);
  }
}

SCalendarUnit[endSelected] {
  background-color: var(--intergalactic-date-picker-cell-active, #2bb3ff);
  color: var(--intergalactic-text-primary-invert, #ffffff);

  &:not([highlighted]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
    border-top-left-radius: 0;
    border-top-right-radius: var(--intergalactic-control-rounded, 6px);
  }

  &:hover {
    color: var(--intergalactic-text-primary-invert, #ffffff);
    background-color: var(--intergalactic-date-picker-cell-active-hover, #008ff8);
  }
}

SCalendarUnit[startHighlighted]:not([selected]) {
  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
  border-top-right-radius: 0;
}

SCalendarUnit[endHighlighted]:not([selected]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
  border-top-left-radius: 0;
  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[compareHighlighted] {
  border-top: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
  border-bottom: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
  border-radius: 0;
  transition: none;
}


SCalendarUnit[compareStartHighlighted],
SCalendarUnit[compareEndHighlighted] {
  border-left: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
  border-right: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
}

SCalendarUnit[compareStart],
SCalendarUnit[compareEnd] {
  border-radius: 0;
  background-color: var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
  color: var(--intergalactic-text-primary-invert, #ffffff);

  &:hover {
    color: var(--intergalactic-text-primary-invert, #ffffff);
    background-color: var(--intergalactic-date-picker-cell-comparison-active-hover, #5925ab);
  }
}

SCalendarUnit[compareStartHighlighted] {
  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[compareEndHighlighted] {
  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[compareStart]:not([compareHighlighted]) {
  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[compareEnd]:not([compareHighlighted]) {
  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
}

SCalendarUnit[outdated] {
  opacity: 0.2;
}

SCalendarUnit[disabled] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

SCalendar:focus {
  & SCalendarUnit[highlighted] {
    z-index: 1;
  }

  &:not(&:has(SCalendarUnit[highlighted])) {
    border-radius: var(--intergalactic-surface-rounded, 6px);
  }
}

@media (prefers-reduced-motion) {

  SCalendarUnit,
  SCalendarUnit[selected],
  SCalendarUnit[highlighted] {
    transition: none;
  }
}