$padding-medium: var(--wds-calendar-padding-medium, var(--wds-space-400, 24px));
$padding-small: var(--wds-calendar-padding-small, var(--wds-space-300, 18px));
$root-background-color: var(
  --wds-color-fill-surface-default,
  var(--wsr-color-D80, #FFFFFF)
);
$focus-outline: var(
  --wds-outline-focus-outer,
  3px solid var(--wsr-color-B10, #116DFF)
);
$focus-outline-inner: var(
  --wds-outline-focus-inner,
  1px solid var(--wsr-color-D80, #FFFFFF)
);
$today-inset-width: var(--wds-calendar-day-today-inset-width, 3px);
$box-shadow: 0 0 0 #{$today-inset-width} #{$root-background-color} inset;

$weekday-color: var(
  --wds-calendar-weekday-label-color,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);
$day-gap: var(--wds-calendar-day-gap, var(--wds-space-0, 0));
$day-fill-hover: var(
  --wds-calendar-day-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF))
);
$day-fill-today: var(
  --wds-calendar-day-fill-today,
  var(--wds-color-fill-dark-secondary, var(--wsr-color-D70, #ECEFF3))
);
$day-fill-selected: var(
  --wds-calendar-day-fill-selected,
  var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116DFF))
);
$day-fill-selected-hover: var(
  --wds-calendar-day-fill-selected-hover,
  var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999FF))
);
$day-fill-range: var(
  --wds-calendar-day-fill-range,
  var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))
);
$day-fill-range-edge: var(
  --wds-calendar-day-fill-range-edge,
  var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))
);
$range-radius: var(
  --wds-calendar-day-range-border-radius,
  var(--wds-border-radius-0, 0)
);
$range-edge-radius: var(--wds-calendar-day-range-edge-border-radius, 50%);

$fill-primary: var(
  --wds-color-fill-standard-primary,
  var(--wsr-color-B10, #116DFF)
);
$day-radius: var(
  --wds-button-border-radius-medium,
  var(--wds-border-radius-full, 50%)
);

$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);

@mixin text-thin($size-token, $size-fallback, $lh-token, $lh-fallback) {
  font-family: #{$font-family};
  font-size: var(#{$size-token}, #{$size-fallback});
  font-weight: var(
    --wds-font-weight-regular,
    var(--wsr-font-weight-regular, 400)
  );
  line-height: var(#{$lh-token}, #{$lh-fallback});
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.calendar {
  &__container#{&}__container--size-medium {
    @include text-thin(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px),
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
  }

  &__container#{&}__container--size-small {
    @include text-thin(
      --wds-font-size-body-tiny,
      var(--wsr-text-font-size-tiny, 12px),
      --wds-font-line-height-body-tiny,
      var(--wsr-text-line-height-tiny, 15px)
    );
  }

  &__container#{&}__container--size-small &__weekdays {
    padding: 0 #{$padding-small};
  }

  &__month#{&}__month--size-medium {
    width: 300px;
  }

  &__month#{&}__month--size-small {
    width: 246px;
  }

  &__weekdays {
    background-color: #{$root-background-color};
    padding: 0 #{$padding-medium};
  }

  &__weekdays-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: #{$day-gap};
  }

  &__weekday {
    color: #{$weekday-color};
    justify-content: center;
    display: flex;
    flex-shrink: 0;

    & abbr {
      text-decoration: none;
    }

    &#{&}--size-medium {
      padding: var(--wds-space-300, 18px) 0 var(--wds-space-200, 12px);
      width: 36px;
    }

    &#{&}--size-small {
      padding: var(--wds-space-200, 12px) 0 var(--wds-space-150, 9px);
      width: 30px;
    }
  }

  &__body {
    background-color: #{$root-background-color};

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

    &#{&}--size-small {
      padding: 0 #{$padding-small} #{$padding-small};
    }
  }

  &__week {
    display: flex;
    justify-content: space-around;
    gap: #{$day-gap};
    margin-top: #{$day-gap};
  }

  &__day {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: #{$day-radius};
    cursor: pointer;
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    z-index: 1;
    position: relative;
  }

  &__day#{&}__day--size-medium {
    width: 36px;
    height: 36px;
  }

  &__day#{&}__day--size-small {
    width: 30px;
    height: 30px;
  }

  &__day:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    z-index: 10;

    &::after {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border-radius: #{$day-radius};
      border-color: #{$fill-primary};
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: #{$focus-outline};
      outline-offset: 1px;
      content: ' ';
      display: block;
      z-index: 11;
    }

    &::before {
      position: absolute;
      inset: 0;
      border-radius: #{$day-radius};
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: #{$focus-outline-inner};
      pointer-events: none;
      content: ' ';
      display: block;
      z-index: 11;
    }
  }

  // `.day:focus .dayCircle` is dropped: `.dayCircle` was only ever referenced
  // from that selector and is never rendered by any component.
  &__day#{&}__day--unfocused {
    box-shadow: none;
  }

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

  &__day#{&}__day--today:not(#{&}__day--selected):not(:hover):focus {
    box-shadow: #{$box-shadow};
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: #{$focus-outline};
    outline-offset: 1px;
  }

  @media (hover: hover) {
    &__day:focus:hover {
      box-shadow: none;
    }

    &__day:hover {
      background-color: #{$day-fill-hover};
    }
  }

  &__day#{&}__day--selected:not(#{&}__day--outside) {
    background-color: #{$day-fill-selected};
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #FFFFFF)
    );
  }

  &__day#{&}__day--outside,
  &__day#{&}__day--disabled {
    pointer-events: none;
    color: var(--wds-color-text-disabled, var(--wsr-color-D50, #ACAFC4));
  }

  // for selection mode type range
  &__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};
    box-shadow: none;
    color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
  }

  &__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) {
    background: none !important;
    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};
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &#{&}--has-indication {
      justify-content: flex-end;
    }
  }

  &__day-text {
    text-align: center;
    line-height: 1;
  }

  &__day-indication-container {
    height: 11px;
    padding: 3px 0 4px 0;
    box-sizing: border-box;
  }

  // for selection mode type range
  &__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};
  }

  // Two months mode
  &__months#{&}__months--two-months {
    display: flex;
  }

  & &__months#{&}__months--two-months &__month:first-child &__header &__arrow-right,
  & &__months#{&}__months--two-months &__month:last-child &__header &__arrow-left,
  & &__months#{&}__months--two-months &__day#{&}__day--outside {
    visibility: hidden;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wds-space-300, 18px) var(--wds-space-400, 24px)
      var(--wds-space-0, 0px) var(--wds-space-400, 24px);
    background: #{$root-background-color};
    border-radius: 8px 8px 0 0;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));

    &#{&}--size-medium {
      padding: var(--wds-space-300, 18px) var(--wds-space-400, 24px)
        var(--wds-space-0, 0) var(--wds-space-400, 24px);
    }

    &#{&}--size-small {
      padding: var(--wds-space-200, 12px) var(--wds-space-200, 12px)
        var(--wds-space-0, 0px) var(--wds-space-200, 12px);
    }
  }

  &__year-and-month-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wds-space-200, 12px);
  }

  &__arrow-left {
    margin-right: auto;
  }

  &__arrow-right {
    margin-left: auto;
  }

  &__arrow-icon {
    display: block;
    cursor: pointer;
  }

  :global([dir='rtl']) &__arrow-icon {
    transform: scaleX(-1);
  }

  :global([dir='rtl']) &__arrow-left {
    margin-left: auto;
    margin-right: 0;
  }

  :global([dir='rtl']) &__arrow-right {
    margin-left: 0;
    margin-right: auto;
  }
}