@ebay/skin/dist/calendar/calendar.css

Skin - CSS modules that represent the brand eBay

:root {
    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
}
.calendar {
    color: var(--calendar-color-token, var(--color-foreground-primary));
    display: table;
}
.calendar__header {
    display: table-caption;
}
.calendar__header--inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.calendar__header h3 {
    flex-grow: 1;
    margin: 0;
    text-align: center;
    width: 0;
}
.calendar__header h3:nth-child(2) {
    margin-right: 40px;
}
.calendar__header h3:nth-last-child(2) {
    margin-left: 40px;
}
.calendar__header h3:nth-child(2):nth-last-child(2) {
    margin: 0;
}
.calendar__header .icon-btn svg {
    width: var(--spacing-200);
}
.calendar__body {
    display: table-row;
}
.calendar__month {
    box-sizing: initial;
    display: table-cell;
    width: var(--calendar-month-width, 100vw);
}
.calendar__month + .calendar__month {
    padding-left: var(--spacing-200);
}
.calendar__month > table > caption {
    text-align: left;
}
.calendar__header + .calendar__body > .calendar__month > table > caption {
    display: none;
}
.calendar__month > table {
    border-spacing: 0 var(--spacing-150);
    width: 100%;
}
.calendar__month th {
    color: var(--calendar-day-label-color, var(--color-foreground-secondary));
    font-weight: 400;
    line-height: var(--spacing-125);
}
.calendar__month td {
    padding: 0;
    text-align: center;
}
.calendar__month td > * {
    align-items: center;
    background: none;
    border: 1px transparent;
    border-radius: var(--spacing-200);
    box-sizing: border-box;
    color: inherit;
    display: inline-flex;
    font-family: inherit;
    height: var(--spacing-400);
    justify-content: center;
    width: var(--spacing-400);
}
.calendar__month
    td:not(.calendar__cell--selected)
    > .calendar__cell--current:not(.calendar__cell--disabled),
.calendar__month
    td:not(.calendar__cell--selected)
    > [aria-current="date"]:not(:disabled) {
    border-color: var(
        --calendar-day-today-border-color,
        var(--color-foreground-primary)
    );
    border-style: solid;
}
.calendar__month td > .calendar__cell--disabled,
.calendar__month td > :disabled {
    color: var(--calendar-day-disabled-color, var(--color-foreground-disabled));
}
.calendar__month td:not(.calendar__range, .calendar__cell--selected) > button {
    overflow: hidden;
    position: relative;
}
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:after {
    background-color: var(--color-state-layer-neutral);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not([disabled], [aria-disabled="true"]):hover:after,
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button[href]:hover:after {
    background-color: var(--color-state-layer-hover);
}
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not([disabled], [aria-disabled="true"]):focus-visible:after,
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button[href]:focus-visible:after {
    background-color: var(--color-state-layer-focus);
}
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not([disabled], [aria-disabled="true"]):active:after,
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button[href]:active:after {
    background-color: var(--color-state-layer-pressed);
}
.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not(:disabled):active {
    font-weight: 700;
}
.calendar__month td.calendar__cell--selected > * {
    background-color: var(
        --calendar-day-selected-background-color,
        var(--color-background-inverse)
    );
    color: var(
        --calendar-day-selected-color,
        var(--color-foreground-on-inverse)
    );
    font-weight: 700;
}
.calendar__range {
    background-color: var(--color-state-layer-pressed);
    position: relative;
}
.calendar__range:before {
    border: solid transparent;
    border-width: 1px 0;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.calendar__range--start:before {
    border-left-width: 1px;
}
.calendar__range--end:before {
    border-right-width: 1px;
}
.calendar__range--start {
    background: linear-gradient(
        to right,
        transparent 50%,
        var(--color-state-layer-pressed) 50%
    );
}
.calendar__range--end {
    background: linear-gradient(
        to left,
        transparent 50%,
        var(--color-state-layer-pressed) 50%
    );
}
.calendar__range--start.calendar__range--end {
    background: transparent;
}
.calendar__range--end:not(.calendar__cell--selected)
    > :not(:disabled, [aria-disabled="true"]),
.calendar__range--start:not(.calendar__cell--selected)
    > :not(:disabled, [aria-disabled="true"]) {
    background-color: var(--color-state-layer-pressed);
}