/* @docs */
$datepicker-font-size: $base-font-size !default;
$datepicker-box-line-height: $base-line-height !default;
$datepicker-box-padding: .375rem 1rem !default;
$datepicker-header-padding: 0 0 0.875rem 0 !default;
$datepicker-header-margin: 0 0 0.875rem 0 !default;
$datepicker-header-border-bottom: 1px solid $grey-lighter !default;
$datepicker-footer-padding: 0.875rem .5rem 0 .5rem !default;
$datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
$datepicker-footer-border-top: 1px solid $grey-lighter !default;
$datepicker-table-head-padding: 0 0 0.875rem 0 !default;
$datepicker-table-head-margin: 0 0 0.875rem 0 !default;
$datepicker-table-head-border-bottom: 1px solid $grey-lighter !default;
$datepicker-table-head-item-color: $grey !default;
$datepicker-table-head-item-font-weight: 600 !default;
$datepicker-item-today-border: solid 1px rgba($primary, 0.5) !default;
$datepicker-item-selectable-color: $grey-dark !default;
$datepicker-item-disabled-color: $grey-light !default;
$datepicker-item-border-radius: $base-border-radius !default;
$datepicker-item-padding: 0.5rem 0.75rem !default;
$datepicker-item-selected-color: $primary-invert !default;
$datepicker-item-selected-background-color: $primary !default;
$datepicker-item-selected-border-radius: 0 !default;
$datepicker-item-selected-within-background-color: rgba($datepicker-item-selected-background-color, 0.5) !default;
$datepicker-item-hovered-background-color: $grey !default;
$datepicker-item-hovered-color: $grey-lighter !default;
$datepicker-item-hovered-background-color: #f5f5f5 !default;
$datepicker-item-hovered-within-background-color: rgba($datepicker-item-hovered-background-color, 0.5) !default;
$datepicker-item-nearby-color: $grey-light !default;
$datepicker-events-item-padding: .3rem .75rem .75rem !default;
$datepicker-event-background-color: $grey-light !default;
$datepicker-event-dots-size: .35em !default;
$datepicker-event-dots-margin: 0 .1em !default;
$datepicker-event-bars-height: .25em !default;
$datepicker-btn-border-color: $grey-lighter !default;
$datepicker-btn-border-radius: $base-border-radius !default;
$datepicker-btn-border: 1px solid transparent !default;
$datepicker-btn-color: #363636 !default;
$datepicker-btn-height: 2.25em !default;
$datepicker-btn-hover-border-color: $grey-light !default;
$datepicker-btn-hover-color: #363636 !default;
$datepicker-btn-line-height: $base-line-height !default;
$datepicker-btn-margin: .25rem !default;
$datepicker-btn-min-width: 2.25em !default;
$datepicker-btn-padding: .5em .5em !default;
/* @docs */

.o-dpck {
    @include avariable('font-size', 'datepicker-font-size', $datepicker-font-size);
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('datepicker-font-size-' + #{$name}), $value);
        }
    }
    &__dropdown {
        width: 100%;
    }
    &__box {
        display: block;
        position: relative;
        @include avariable('line-height', 'datepicker-box-line-height', $datepicker-box-line-height);
        @include avariable('padding', 'datepicker-box-padding', $datepicker-box-padding);
    }
    &__header {
        @include avariable('padding', 'datepicker-header-padding', $datepicker-header-padding);
        @include avariable('margin', 'datepicker-header-margin', $datepicker-header-margin);
        @include avariable('border-bottom', 'datepicker-header-border-bottom', $datepicker-header-border-bottom);
        &__buttons {
            align-items: center;
            display: flex;
            justify-content: center;
            text-align: center;
            @each $name, $value in $sizes {
                &--#{$name} {
                    @include avariable('font-size', ('datepicker-font-size-' + #{$name}), $value);
                }
            }
        }
        &__previous, &__next {
            justify-content: center;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            -moz-appearance: none;
            -webkit-appearance: none;
            align-items: center;
            box-shadow: none;
            display: inline-flex;
            position: relative;
            vertical-align: top;
            @include unselectable;
            @include avariable('line-height', 'datepicker-btn-line-height', $datepicker-btn-line-height);
            @include avariable('border', 'datepicker-btn-border', $datepicker-btn-border);
            @include avariable('border-radius', 'datepicker-btn-border-radius', $datepicker-btn-border-radius);
            @include avariable('border-color', 'datepicker-btn-border-color', $datepicker-btn-border-color);
            @include avariable('color', 'datepicker-btn-color', $datepicker-btn-color);
            @include avariable('min-width', 'datepicker-btn-min-width', $datepicker-btn-min-width);
            @include avariable('height', 'datepicker-btn-height', $datepicker-btn-height);
            @include avariable('padding', 'datepicker-btn-padding', $datepicker-btn-padding);
            @include avariable('margin', 'datepicker-btn-margin', $datepicker-btn-margin);
            &:hover {
                text-decoration: none;
                @include avariable('border-color', 'datepicker-btn-hover-border-color', $datepicker-btn-hover-border-color);
                @include avariable('color', 'datepicker-btn-hover-color', $datepicker-btn-hover-color);
            }
        }
        &__previous {
            order: 1;
        }
        &__next {
            order: 3;
        }
        &__list {
            order: 2;
            align-items: center;
            display: flex;
            justify-content: center;
            text-align: center;
            list-style: none;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            @include side-flex-gap($datepicker-btn-margin * 0.5);
        }
    }
    &__footer {
        @include avariable('padding', 'datepicker-header-padding', $datepicker-footer-padding);
        @include avariable('margin', 'datepicker-header-margin', $datepicker-footer-margin);
        @include avariable('border-top', 'datepicker-header-border-top', $datepicker-footer-border-top);
    }
    &__table, &__month {
        display: table;
        margin: 0 auto 0 auto;
        &__head {
            display: table-header-group;
            @include avariable('padding', 'datepicker-table-head-padding', $datepicker-table-head-padding);
            @include avariable('margin', 'datepicker-table-head-margin', $datepicker-table-head-margin);
            @include avariable('border-bottom', 'datepicker-table-head-border-bottom', $datepicker-table-head-border-bottom);
        }
        &__body {
            display: table-row-group;
        }
        &__row {
            display: table-row;
        }
        &__head-cell {
            @include avariable('padding', 'datepicker-table-head-item-padding', $datepicker-table-head-item-color);
            @include avariable('font-weight', 'datepicker-table-head-item-font-weight', $datepicker-table-head-item-font-weight);
        }
        &__cell {
            text-align: center;
            vertical-align: middle;
            display: table-cell;
            text-decoration: none;
            @include avariable('border-radius', 'datepicker-item-border-radius', $datepicker-item-border-radius);
            @include avariable('padding', 'datepicker-item-padding', $datepicker-item-padding);
            &--unselectable {
                @include avariable('color', 'datepicker-item-disabled-color', $datepicker-item-disabled-color);
            }
            &--today {
                @include avariable('border', 'datepicker-item-today-border', $datepicker-item-today-border);
            }
            &--selectable {
                @include avariable('color', 'datepicker-item-selectable-color', $datepicker-item-selectable-color);
            }
            &--first-hovered {
                @include avariable('background-color', 'datepicker-item-hovered-background-color', $datepicker-item-hovered-background-color);
                @include avariable('color', 'datepicker-item-hovered-color', $datepicker-item-hovered-color);
                @include avariable('border-bottom-right-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
                @include avariable('border-top-right-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--within-hovered {
                @include avariable('background-color', 'datepicker-item-hovered-within-background-color', $datepicker-item-hovered-within-background-color);
                @include avariable('color', 'datepicker-item-hovered-color', $datepicker-item-hovered-color);
                @include avariable('border-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--last-hovered {
                @include avariable('background-color', 'datepicker-item-hovered-background-color', $datepicker-item-hovered-background-color);
                @include avariable('color', 'datepicker-item-hovered-color', $datepicker-item-hovered-color);
                @include avariable('border-bottom-left-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
                @include avariable('border-top-left-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--selected:not(&--first-hovered):not(&--within-hovered):not(&--last-hovered) {
                @include avariable('background-color', 'datepicker-item-selected-background-color', $datepicker-item-selected-background-color);
                @include avariable('color', 'datepicker-item-selected-color', $datepicker-item-selected-color);
            }
            &--first-selected:not(&--first-hovered):not(&--within-hovered):not(&--last-hovered) {
                @include avariable('background-color', 'datepicker-item-selected-background-color', $datepicker-item-selected-background-color);
                @include avariable('color', 'datepicker-item-selected-color', $datepicker-item-selected-color);
                @include avariable('border-bottom-right-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
                @include avariable('border-top-right-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--within-selected:not(&--first-hovered):not(&--within-hovered):not(&--last-hovered) {
                @include avariable('background-color', 'datepicker-item-selected-within-background-color', $datepicker-item-selected-within-background-color);
                @include avariable('border-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--last-selected:not(&--first-hovered):not(&--within-hovered):not(&--last-hovered) {
                @include avariable('background-color', 'datepicker-item-selected-background-color', $datepicker-item-selected-background-color);
                @include avariable('color', 'datepicker-item-selected-color', $datepicker-item-selected-color);
                @include avariable('border-bottom-left-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
                @include avariable('border-top-left-radius', 'datepicker-item-selected-border-radius', $datepicker-item-selected-border-radius);
            }
            &--nearby:not(&--selected) {
                @include avariable('color', 'datepicker-item-nearby-color', $datepicker-item-nearby-color);
            }
            &--invisible {
                visibility: hidden;
            }
            &--events {
                @include avariable('padding', 'datepicker-events-item-padding', $datepicker-events-item-padding);
                position: relative;
            }
        }
        &__events {
            display: flex;
            justify-content: center;
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 15%;
        }
        &__event {
            @include avariable('background-color', 'datepicker-event-background-color', $datepicker-event-background-color);
            @each $name, $pair in $colors {
                $color: nth($pair, 1);
                &--#{$name} {
                    background-color: $color;
                    @include avariable('background-color', ('variant-' + #{$name}), $color);
                }
            }
            &--dots {
                border-radius: 50%;
                @include avariable('margin', 'datepicker-event-dots-margin', $datepicker-event-dots-margin);
                @include avariable('height', 'datepicker-event-dots-size', $datepicker-event-dots-size);
                @include avariable('width', 'datepicker-event-dots-size', $datepicker-event-dots-size);
            }
            &--bars {
                @include avariable('height', 'datepicker-event-bars-height', $datepicker-event-bars-height);
                width: 100%;
            }
        }
    }
    &__month__table {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 17rem;
    }
    &__month__cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.33%;
        height: 2.5rem;
    }
    &--mobile {
        .o-dpck__header__previous {
            order: 1;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .o-dpck__header__next {
            order: 3;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .o-dpck__header__list {
            order: 2;
            flex-grow: 1;
            flex-shrink: 1;
        }
    }
}