$padding-medium: var(--wds-calendar-padding-medium, 18px);
$padding-small: var(--wds-calendar-padding-small, var(--wds-space-300));
$day-gap: var(--wds-calendar-day-gap, var(--wds-space-50));
$weekday-color: var(--wds-calendar-weekday-label-color, var(--wds-color-text-disabled));
$day-radius: var(--wds-button-border-radius-medium, var(--wds-border-radius-400));
$day-fill-today: var(--wds-calendar-day-fill-today, var(--wds-color-black-550));
$box-shadow: 0 0 0
  var(--wds-calendar-day-today-inset-width, var(--wds-border-width-none))
  var(--wds-color-fill-surface-default, var(--wsr-color-D80, #FFFFFF)) inset;
$day-fill-hover: var(--wds-calendar-day-fill-hover, var(--wds-color-black-700));
$day-fill-selected: var(--wds-calendar-day-fill-selected, var(--wds-color-black-100));
$day-fill-range: var(--wds-calendar-day-fill-range, var(--wds-color-black-700));
$day-fill-selected-hover: var(--wds-calendar-day-fill-selected-hover, var(--wds-color-black-200));
$day-fill-range-edge: var(--wds-calendar-day-fill-range-edge, var(--wds-color-white-transparent-0));
$range-radius: var(--wds-calendar-day-range-border-radius, var(--wds-border-radius-400));
$range-edge-radius: var(--wds-calendar-day-range-edge-border-radius, var(--wds-border-radius-400));

.calendar {
  &__weekdays {
    padding: 0 #{$padding-medium};
  }

  &__weekdays-row {
    gap: #{$day-gap};
  }

  &__weekday {
    color: #{$weekday-color};
  }

  &__body#{&}__body--size-medium {
    padding: 0 #{$padding-medium} #{$padding-medium};
  }

  &__week {
    gap: #{$day-gap};
    margin-top: #{$day-gap};
  }

  &__day {
    border-radius: #{$day-radius};
  }

  &__day:focus::after {
    border-radius: #{$day-radius};
  }

  &__day:focus::before {
    border-radius: #{$day-radius};
  }

  &__day#{&}__day--today:not(#{&}__day--selected):not(:hover) {
    background-color: #{$day-fill-today};
    box-shadow: #{$box-shadow};
  }

  &__day#{&}__day--today:not(#{&}__day--selected):not(:hover):focus {
    box-shadow: #{$box-shadow};
  }

  @media (hover: hover) {
    &__day:hover {
      background-color: #{$day-fill-hover};
    }
  }

  &__day#{&}__day--selected:not(#{&}__day--outside) {
    background-color: #{$day-fill-selected};
  }

  &__day#{&}__day--selected:not(#{&}__day--start):not(#{&}__day--end):not(#{&}__day--outside):not(#{&}__day--single-day) {
    background-color: #{$day-fill-range};
    border-radius: #{$range-radius};
  }

  &__day#{&}__day--selected:not(#{&}__day--outside):last-of-type,
  &__day#{&}__day--last-of-month:not(#{&}__day--outside) {
    border-top-right-radius: #{$range-edge-radius} !important;
    border-bottom-right-radius: #{$range-edge-radius} !important;
  }

  &__day#{&}__day--selected:not(#{&}__day--outside):first-of-type,
  &__day#{&}__day--first-of-month:not(#{&}__day--outside) {
    border-top-left-radius: #{$range-edge-radius} !important;
    border-bottom-left-radius: #{$range-edge-radius} !important;
  }

  &__day#{&}__day--single-day:not(#{&}__day--outside),
  &__day#{&}__day--start#{&}__day--end:not(#{&}__day--outside) {
    border-radius: #{$day-radius} !important;
  }

  &__day#{&}__day--selected#{&}__day--start:not(#{&}__day--outside) &__day-wrapper,
  &__day#{&}__day--selected#{&}__day--end:not(#{&}__day--outside) &__day-wrapper,
  &__day#{&}__day--selected#{&}__day--single-day:not(#{&}__day--outside) &__day-wrapper {
    background-color: #{$day-fill-selected};
  }

  @media (hover: hover) {
    &__day#{&}__day--selected#{&}__day--start:not(#{&}__day--outside):hover &__day-wrapper,
    &__day#{&}__day--selected#{&}__day--end:not(#{&}__day--outside):hover &__day-wrapper,
    &__day#{&}__day--selected#{&}__day--single-day:not(#{&}__day--outside):hover &__day-wrapper {
      background-color: #{$day-fill-selected-hover};
    }
  }

  &__day-wrapper {
    border-radius: #{$day-radius};
  }

  &__day#{&}__day--selected#{&}__day--start:not(#{&}__day--outside) {
    background: linear-gradient(
      to left,
      #{$day-fill-range-edge} 0%,
      #{$day-fill-range-edge} 50%,
      #000000 50%,
      transparent 50%,
      transparent 100%
    );
    border-radius: #{$range-radius};
  }

  &__day#{&}__day--selected#{&}__day--end:not(#{&}__day--outside) {
    background: linear-gradient(
      to right,
      #{$day-fill-range-edge} 0%,
      #{$day-fill-range-edge} 50%,
      #000000 50%,
      transparent 50%,
      transparent 100%
    );
    border-radius: #{$range-radius};
  }
}