@import "../variables/variables";
@import "../mixins/private/token-mixins";

.calendar {
    display: table;
    @include color-token(calendar-color-token, color-foreground-primary);
}

/************
 ** HEADER **
 ************/

.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; /* In conjunction with `flex-grow: 1`, this forces all headers to be an equal size */
}

.calendar__header h3:nth-child(2) {
    margin-right: 40px; /* total width of icon-btn--small */
}

.calendar__header h3:nth-last-child(2) {
    margin-left: 40px; /* total width of icon-btn--small */
}

.calendar__header h3:nth-child(2):nth-last-child(2) {
    margin: 0;
}

.calendar__header .icon-btn svg {
    width: var(--spacing-200);
}

/************
 *** BODY ***
 ************/

.calendar__body {
    display: table-row;
}

.calendar__month {
    box-sizing: content-box;
    display: table-cell;
    width: var(--calendar-month-width, 100vw);
}

.calendar__month + .calendar__month {
    padding-left: var(--spacing-200);
}

/************
 ** MONTHS **
 ************/

.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 {
    @include color-token(calendar-day-label-color, color-foreground-secondary);

    font-weight: normal;
    line-height: var(--spacing-125);
}

.calendar__month td {
    padding: 0;
    text-align: center;
}

.calendar__month td > * {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--spacing-200);
    border-style: none; /* Only effects high contrast users */
    box-sizing: border-box;
    color: inherit;
    display: inline-flex;
    font: inherit;
    height: var(--spacing-400);
    justify-content: center;
    width: var(--spacing-400);
}

/************
 *** DAYS ***
 ************/

.calendar__month
    td:not(.calendar__cell--selected)
    > [aria-current="date"]:not(:disabled),
.calendar__month
    td:not(.calendar__cell--selected)
    > .calendar__cell--current:not(.calendar__cell--disabled) {
    @include border-color-token(
        calendar-day-today-border-color,
        color-foreground-primary
    );

    border-style: solid;
}

.calendar__month td > :disabled,
.calendar__month td > .calendar__cell--disabled {
    @include color-token(
        calendar-day-disabled-color,
        color-foreground-disabled
    );
}

.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not(:disabled):hover {
    @include background-color-token(
        calendar-day-hover-background-color,
        color-state-primary-hover
    );
}

.calendar__month
    td:not(.calendar__range, .calendar__cell--selected)
    > button:not(:disabled):active {
    font-weight: bold;
}

.calendar__month td.calendar__cell--selected > * {
    @include background-color-token(
        calendar-day-selected-background-color,
        color-background-inverse
    );
    @include color-token(
        calendar-day-selected-color,
        color-foreground-on-inverse
    );

    font-weight: bold;
}

/************
 * SELECTED *
 ************/

.calendar__range {
    @include background-color-token(
        calendar-day-range-background-color,
        color-state-secondary-active
    );

    position: relative;
}

.calendar__range::before {
    /* Only visible in WHCM */
    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 {
    /* WHCM */
    border-left-width: 1px;
}

.calendar__range--end::before {
    /* WHCM */
    border-right-width: 1px;
}

.calendar__range--start {
    background: linear-gradient(
        to right,
        transparent 50%,
        var(--color-state-secondary-active) 50%
    );
}

.calendar__range--end {
    background: linear-gradient(
        to left,
        transparent 50%,
        var(--color-state-secondary-active) 50%
    );
}

.calendar__range--start.calendar__range--end {
    background: transparent;
}

.calendar__range--start:not(.calendar__cell--selected)
    > :not(:disabled, [aria-disabled="true"]),
.calendar__range--end:not(.calendar__cell--selected)
    > :not(:disabled, [aria-disabled="true"]) {
    @include background-color-token(
        calendar-day-range-end,
        color-state-secondary-active
    );
}
