.kbq-calendar {
    display: block;

    box-sizing: initial;
}

.kbq-calendar__content {
    padding-right: var(--kbq-datepicker-size-grid-padding-horizontal);

    padding-left: var(--kbq-datepicker-size-grid-padding-horizontal);

    outline: none;
}

.kbq-calendar__table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

.kbq-calendar__table-header th {
    text-align: center;
    height: 30px;

    &.kbq-calendar__table-header-divider {
        position: relative;

        box-sizing: border-box;
        height: var(--kbq-datepicker-size-grid-content-gap-vertical);

        // We use an absolutely positioned pseudo-element as the divider line for the table header so we
        // can extend it all the way to the edge of the calendar.
        &::after {
            content: '';

            position: absolute;
            top: 0;
            left: calc(-1 * #{var(--kbq-datepicker-size-grid-padding-horizontal)});
            right: calc(-1 * #{var(--kbq-datepicker-size-grid-padding-horizontal)});

            height: var(--kbq-datepicker-size-grid-divider-height);
        }
    }
}