@use './datepicker-theme' as *;

$kbq-datepicker-non-touch-calendar-cell-size: 40px;
$kbq-datepicker-size-grid-padding-horizontal: var(--kbq-datepicker-size-grid-padding-horizontal);

$kbq-datepicker-non-touch-calendar-width: calc(
    $kbq-datepicker-non-touch-calendar-cell-size * 7 + $kbq-datepicker-size-grid-padding-horizontal * 2
);
// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$kbq-datepicker-non-touch-calendar-height: 270px;

.kbq-datepicker__content {
    display: block;

    border-radius: var(--kbq-datepicker-size-container-border-radius);

    .kbq-calendar {
        width: $kbq-datepicker-non-touch-calendar-width;
        height: $kbq-datepicker-non-touch-calendar-height;

        padding-top: var(--kbq-datepicker-size-container-padding-vertical);

        padding-bottom: var(--kbq-datepicker-size-container-padding-vertical);
    }
}

@include kbq-datepicker-theme();
@include kbq-datepicker-typography();