@universal-material/web/calendar/range-calendar.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  .selected:not(:has(.start-date)):not(:has(.end-date)) .calendar-item:has(.date)::before, .selected:not(:has(.start-date)) .calendar-item:has(.date):has(~ .end-date)::before, .selected:not(:has(.end-date)) .start-date ~ .calendar-item:has(.date)::before,
  .selected .start-date ~ .calendar-item:has(.date):has(~ .end-date)::before,
  .selected .start-date:has(.date)::before,
  .selected .end-date:has(.date)::before, .selecting.before-start-date-month:not(:has(.selected-date)) .calendar-item:hover:has(.date) ~ .calendar-item:has(.date)::before, .selecting.after-start-date-month:not(:has(.selected-date)) .calendar-item:has(.date):has(~ .calendar-item:hover .date)::before, .selecting:has(.selected-date) .calendar-item:hover:has(.date):has(~ .selected-date) ~ .selected-date::before,
  .selecting:has(.selected-date) .calendar-item:hover:has(.date):has(~ .selected-date) ~ .calendar-item:has(~ .selected-date)::before, .selecting:has(.selected-date) .selected-date:has(~ .calendar-item:hover .date)::before,
  .selecting:has(.selected-date) .selected-date:has(~ .calendar-item:hover .date) ~ .calendar-item:has(~ .calendar-item:hover .date)::before, .selecting .calendar-item:hover:has(.date)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: calc(var(--_date-size) * -0.5);
    height: var(--_date-size);
    background: var(--u-color-secondary-container);
    z-index: -1;
    pointer-events: none;
  }

  .selected .start-date:has(.date)::before, .selecting.before-start-date-month:not(:has(.selected-date)) .calendar-item:has(.date):hover::before, .selecting:has(.selected-date) .calendar-item:hover:has(.date):has(~ .selected-date)::before, .selecting:has(.selected-date) .selected-date:has(~ .calendar-item:hover .date)::before {
    left: 50%;
    width: 50%;
  }

  .selected .end-date:has(.date)::before, .selecting.after-start-date-month:not(:has(.selected-date)) .calendar-item:has(.date):hover::before, .selecting:has(.selected-date) .calendar-item:hover:has(.date):has(~ .selected-date) ~ .selected-date::before, .selecting:has(.selected-date) .selected-date:has(~ .calendar-item:hover .date) ~ .calendar-item:has(.date):hover::before {
    width: 50%;
  }

  .selecting .calendar-item:hover .date {
    background-color: var(--u-calendar-selected-date-background-color, var(--u-color-primary, rgb(103, 80, 164)));
    color: var(--u-calendar-selected-date-color, var(--u-color-on-primary, rgb(255, 255, 255)));
  }
  .selecting:has(.selected-date) .selected-date:hover::before {
    display: none;
  }
  .selected .start-date.end-date::before {
    display: none;
  }
`;
//# sourceMappingURL=range-calendar.styles.js.map