/* stylelint-disable selector-class-pattern, custom-property-pattern -- react-day-picker uses underscore class names */
.components-date-range {
  &.rdp-root {
    --rdp-cell-size: 40px;
    --rdp-accent-color: var(--bs-secondary);
    --rdp-selected-border: none;
    --rdp-today-color: var(--bs-secondary);
    --rdp-range_middle-background-color: var(--bs-light);
  }

  .rdp-day_button {
    padding: 0;
  }

  .rdp-selected {
    font-weight: inherit;
    font-size: inherit;
  }

  .rdp-button_previous,
  .rdp-button_next {
    color: var(--bs-secondary);
  }

  .rdp-day {
    padding: 0;
    width: 36px;
    height: 36px;
  }

  .rdp-day_button {
    &:focus,
    &:active {
      outline: none;
      border: 0;
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--bs-light);
    }

    &.rdp-disabled {
      opacity: 1;
    }
  }

  .rdp-month_caption {
    font-weight: 400;
    font-size: 120%;
  }

  .rdp-month_grid {
    border-collapse: inherit;
    border-spacing: 0 1px;
  }

  .rdp-day_button {
    &:hover,
    &:active {
      border-radius: 0.5rem;
    }

    &:not(.rdp-disabled, .rdp-range_middle, .rdp-selected):hover {
      background-color: var(--bs-light);
    }
  }

  .rdp-day.rdp-disabled .rdp-day_button {
    color: var(--bs-secondary);
  }

  .rdp-day.rdp-today .rdp-day_button {
    font-weight: 600;
  }

  .rdp-day.rdp-selected .rdp-day_button {
    border-radius: 0;
    font-weight: 400;
    font-size: inherit;
  }

  .rdp-day.rdp-selected.rdp-range_start .rdp-day_button,
  .rdp-day.rdp-selected.rdp-range_end .rdp-day_button {
    font-weight: 600;
    background-color: var(--bs-primary);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--bs-primary);
    }
  }

  .rdp-day.rdp-selected.rdp-range_start .rdp-day_button {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .rdp-day.rdp-selected.rdp-range_end .rdp-day_button {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }

  .rdp-day.rdp-selected:not(.rdp-range_middle) .rdp-day_button {
    background-color: var(--bs-primary);
    color: var(--bs-white);
  }

  .rdp-day.rdp-selected.rdp-range_middle:not(.rdp-range_start, .rdp-range_end) .rdp-day_button {
    background-color: var(--bs-light);
    color: var(--karma-components-date-range-sub-color);
  }
}
