.components-date-range {
  --rdp-cell-size: 40px;

  .rdp-cell {
    width: 36px;
    height: 36px;
  }

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

    &:hover,
    &:active,
    &:focus {
      background-color: $light;
    }

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

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

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

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

    &:not(.rdp-day_disabled):not(.rdp-day_range_middle):not(.rdp-day_selected):hover {
      background-color: $light;
    }

    &.rdp-day_disabled {
      color: $secondary;
    }

    &.rdp-day_today {
      font-weight: 600;
    }

    &.rdp-day_selected {
      border-radius: 0;

      &.rdp-day_range_start,
      &.rdp-day_range_end {
        font-weight: 600;
        background-color: $primary;
      }

      &.rdp-day_range_start {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
      }

      &.rdp-day_range_end {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
      }

      &.rdp-day_start:not(.rdp-day_range_middle),
      &.rdp-day_end:not(.rdp-day_range_middle) {
        background-color: $primary;
        color: $white;
      }
      &.rdp-day_range_middle:not(.rdp-day_range_start):not(.rdp-day_range_end) {
        background-color: $light;
        color: $components-date-range-sub-color;
      }
    }
  }
}
