.date-picker-dropdown {
    position: relative;

    .dropdown-menu {
        min-width: 0;
        max-height: none;
        padding: 0;

        &.on-right {
            right: 0;
            left: auto;
        }
    }

    .dropdown-selected-value {
        font-weight: var(--main-font-regular);
    }
}

.date-picker-box {
    width: $date-picker-width;
    background-color: var(--white);
    border: $default-border;
    border-radius: $border-radius;

    &.simple {
        width: auto;
    }
}

.dropdown-menu .date-picker-box {
    border: none;
}

.calendar {
    table.calendar-grid {
        width: $calendar-width;
        table-layout: fixed;

        &.selecting {
            td:not(.un-selectable) {
                cursor: pointer;
            }
        }

        td,
        th,
        td:first-child,
        td:last-child,
        th:first-child,
        th:last-child {
            width: $calendar-cell-dimensions;
            height: $calendar-cell-dimensions;
            padding: 0;
            text-align: center;
            vertical-align: middle;
        }

        th {
            color: var(--deprecated-dark-grey);
            text-transform: uppercase;
            border-bottom: $calendar-border;
        }

        td {
            border: $calendar-border;
            border-top: none;
            border-left: none;

            &:last-child {
                border-right: none;
            }
        }

        .other-month-date,
        .un-selectable {
            color: var(--deprecated-medium-grey);
        }

        .selected-date {
            position: relative;
            top: 0;
            left: -#{$calendar-border-width};
            display: block;
            width: calc(#{$calendar-cell-dimensions} + #{$calendar-border-width});
            height: $selected-date-height;
            color: var(--white);
            line-height: $selected-date-height;
            background-color: var(--digital-blue-60);
        }

        .selected-date.comparison-date {
            background-color: var(--digital-blue-80);
        }

        .lower-limit,
        .upper-limit {
            width: calc(#{$calendar-cell-dimensions} - #{$selected-date-offset} - #{$calendar-limit-border-width});

            &::before,
            &::after {
                position: absolute;
                display: block;
                width: $calendar-limit-border-length;
                height: $calendar-limit-border-width;
                background: var(--navy-blue-80);
                content: '';
            }

            &::before {
                top: -#{$selected-date-offset};
            }

            &::after {
                bottom: -#{$selected-date-offset};
            }
        }

        .lower-limit {
            left: calc(#{$selected-date-offset} + #{$calendar-limit-border-width});
            border-left: $calendar-limit-border-width solid var(--navy-blue-80);

            &::before,
            &::after {
                left: -#{$calendar-limit-border-width};
            }
        }

        .upper-limit {
            border-right: $calendar-limit-border-width solid var(--navy-blue-80);

            &::before,
            &::after {
                right: -#{$calendar-limit-border-width};
            }
        }

        .lower-limit.upper-limit:not(.countdown) {
            width: calc(
                #{$calendar-cell-dimensions} - #{$selected-date-offset} * 2 - #{$calendar-limit-border-width} * 2 - #{$selected-date-offset}
            );

            span {
                &::before,
                &::after {
                    position: absolute;
                    right: -#{$calendar-limit-border-width};
                    display: block;
                    width: $calendar-limit-border-length;
                    height: $calendar-limit-border-width;
                    background: var(--navy-blue-80);
                    content: '';
                }

                &::before {
                    top: -#{$calendar-limit-border-width};
                }

                &::after {
                    bottom: -#{$calendar-limit-border-width};
                }
            }
        }

        tr:hover td {
            background: none;
        }

        tr:last-child {
            td {
                border-bottom: none;
            }
        }
    }

    &.countdown-calendar {
        table.calendar-grid {
            tr,
            td {
                border: 0;
            }

            th {
                border-bottom: 0;
            }

            td {
                .countdown {
                    position: relative;
                    top: 0;
                    left: calc(#{$selected-date-offset} + #{$calendar-limit-border-width} + 2px);
                    display: block;
                    width: $countdown-cell-height;
                    height: $countdown-cell-height;
                    color: var(--grey-40);
                    line-height: $selected-date-height;
                    background-color: var(--grey-40);
                    border-radius: 50%;

                    &.lower-limit,
                    &.upper-limit {
                        &::before,
                        &::after {
                            display: none;
                        }
                    }

                    &.other-month-date {
                        color: var(--white);
                        background-color: var(--white);
                    }

                    &.selected-date {
                        color: var(--navy-blue-80);
                        background-color: var(--navy-blue-80);

                        &.lower-limit,
                        &.upper-limit {
                            &::before,
                            &::after {
                                display: none;
                            }
                        }

                        &.todays-date {
                            color: var(--navy-blue-80);
                            font-size: $small-font-size;
                            background-color: var(--white);
                            border: 1px solid var(--navy-blue-80);
                        }
                    }
                }
            }
        }
    }
}

.options-cycle {
    font-size: $big-font-size;

    &.mod-inline {
        display: inline-flex;
    }

    .options-cycle-option {
        display: inline-block;
        text-align: center;
    }

    &.mod-month .options-cycle-option {
        min-width: 120px;
    }
}

.options-cycle-button {
    justify-content: center;
    padding: 0;
    background-color: var(--white);
    border: none;
    cursor: pointer;

    &.mod-border {
        border: $button-border-width solid var(--navy-blue-80);
    }
}

.option-picker {
    li {
        width: 50%;
        background: var(--white);

        button {
            display: block;
            box-sizing: border-box;
            width: 100%;
            padding: $dropdown-choices-top-bottom-margin;
            color: var(--grey-100);
            font-size: $button-font-size;
            background: none;
            border: $default-border;
            border-top-color: transparent;
            border-left-color: transparent;
            outline: none;
            cursor: pointer;

            &.disabled {
                background-color: var(--grey-40);
            }

            &.disabled:hover {
                background-color: var(--grey-40);
            }
        }

        &:last-child:nth-child(2n + 1) {
            width: 100%;
        }

        // Here we change the border radius of the options in the corners (the options are shown in a 2xX grid)
        &:first-child {
            @include button-border('top', 'left', true);
        }

        &:nth-child(2) {
            @include button-border('top', 'right', true);
        }

        &:nth-last-child(2):not(:nth-child(2n)),
        &:last-child:nth-child(2n + 1) {
            @include button-border('bottom', 'left');
        }

        &:last-child {
            @include button-border('bottom', 'right');
        }

        &:nth-child(2n-1) {
            button {
                border-left: $default-border;
            }
        }

        &:nth-child(1n) {
            button {
                &:hover:not(:disabled) {
                    background-color: var(--deprecated-light-grey);
                }

                &.active:not(:disabled) {
                    color: var(--white);
                    background-color: var(--digital-blue-60);
                }
            }
        }
    }
}

.date-picker {
    justify-content: space-between;

    input {
        width: 100%;
        padding: $dropdown-choices-top-bottom-margin;
        font-size: var(--default-font-size);
        border-radius: $border-radius;
        outline: none;

        &:not(.picking-date, .date-picked) {
            border: $default-border;
        }

        &.picking-date,
        &.date-picked {
            border-color: var(--digital-blue-60);
            border-style: solid;
            border-width: 2px;

            &.invalid {
                border-color: var(--critical-70);
            }
        }

        &.date-picked {
            color: var(--white);
            background-color: var(--digital-blue-60);
        }
    }

    > span {
        order: 1;
        margin-left: $default-margin;
    }
}

.mod-inline {
    justify-content: space-between;

    .date-picker {
        width: calc(50% - #{$button-margin-width});

        input {
            width: 100%;
        }
    }
}

.date-button {
    padding: 7px 8px;
}

.clear-selection-button {
    display: block;
    width: 100%;
}

.date-separator {
    font-size: var(--default-font-size);
    line-height: $date-picker-dimension;

    &.mod-vertical {
        display: block;
        line-height: var(--default-font-size);
        text-align: center;

        span {
            display: inline-block;
            transform: rotate(90deg);
        }
    }
}

.calendar-max-height {
    height: $calendar-max-height;
}