/*------------------------------------*\
    DATE PICKER
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

$date-picker-focus-outline-width: 0.125em;
$date-picker-focus-border-width: helpers.$focus__shadow-width;

.ds_datepicker {
    position: relative;

    .ds_input {
        margin-bottom: 0;
    }

    &__input-wrapper {
        display: flex;
        gap: 1rem;
    }

    &__dialog {
        @include helpers.ds_box-shadow;

        background-color: settings.$ds_colour__background--primary;
        clear: both;
        display: none;
        padding: 0.5rem;
        outline: 0.0625rem solid settings.$ds_colour__border;
        outline-offset: -0.0625rem;
        position: static;
        top: 0;
        transition: background-color 0.2s, outline-color 0.2s;
        width: 18.5rem;
        z-index: 2;

        &--open {
            display: block;
            left: 0;
        }

        &__header {
            position: relative;
            text-align: center;

            > :nth-child(1) {
                position: absolute;
                left: 0;
                top: -0.125rem;
            }

            > :nth-child(3) {
                position: absolute;
                right: 0;
                top: -0.125rem;
            }
        }

        &__title {
            line-height: helpers.line-height-on-grid(settings.$small-size, 2);
            margin: 0 !important;
            text-transform: uppercase;
            @include helpers.ds_small-size;
        }

        &__navbuttons {
            button {
                @include helpers.ds_link;
                @include helpers.ds_link--block;

                background-color: transparent;
                color: settings.$ds_colour__text;
                display: inline-block;
                font-weight: settings.$normal;
                min-height: 2.5rem;
                margin: 0;
                padding: 0.25rem;
                min-width:  2rem;

                &:hover {
                    color: currentColor;
                }

                .ds_icon {
                    height: 2rem;
                    padding: 0;
                    position: static;
                    width: 1.5rem;
                }
            }
        }

        &__table {
            tbody:focus-within {
                outline: $date-picker-focus-outline-width solid settings.$ds_colour__link--focus__background;

                @include helpers.ds_media-query-high-contrast {
                    outline-color: highlight;
                }
            }

            td {
                border: 0;
                margin: 0;
                outline: 0;
                padding: 0;
            }

            th {
                color: settings.$ds_colour__text--secondary;
                font-weight: settings.$normal;
                @include helpers.ds_small-size;
            }

            button {
                @include helpers.ds_small-size;
                @include helpers.ds_link;
                @include helpers.ds_link--block;

                background-color: transparent;
                border-width: 0;
                color: settings.$ds_colour__text;
                font-weight: settings.$normal;
                min-height: 2.5rem;
                margin: 0;
                padding: 0;
                min-width: 2.5rem;

                &[disabled="true"],
                &[aria-disabled="true"] {
                    background-color: settings.$ds_colour__link--disabled__background;
                    color: settings.$ds_colour__link--disabled;
                    pointer-events: none;

                    &:focus {
                        box-shadow:
                            inset 0 #{$date-picker-focus-border-width * -1} settings.$ds_colour__focus, // bottom shadow
                            inset 0 $date-picker-focus-outline-width settings.$ds_colour__focus--background, // top
                            inset #{$date-picker-focus-outline-width * -1} 0 settings.$ds_colour__focus--background, // right
                            inset 0 #{($date-picker-focus-outline-width + $date-picker-focus-border-width) * -1} settings.$ds_colour__focus--background, // bottom
                            inset $date-picker-focus-outline-width 0 settings.$ds_colour__focus--background; // left
                    }
                }

                &.ds_datepicker__current {
                    $dp-current-outline-width: 0.125rem;
                    outline: $dp-current-outline-width solid settings.$ds_colour__border--strong !important;
                    outline-offset: #{$dp-current-outline-width * -1};
                }

                &.ds_datepicker__current[tabindex="-1"] {
                    background: settings.$ds_colour__link--current__background;
                    color: currentColor;
                }

                &.ds_datepicker__today {
                    font-weight: settings.$bold;

                    &::after {
                        background-color: currentColor;
                        border-radius: 0.25rem;
                        bottom: 0.375rem;
                        content: '';
                        height: 0.25rem;
                        left: 50%;
                        margin-left: -0.125rem;
                        position: absolute;
                        width: 0.25rem;
                    }
                }

                &.ds_selected:not(:focus) {
                    background-color: settings.$ds_colour__text;
                    color: settings.$ds_colour__text--reversed;
                }

                /*
                 * helps with focus in windows high contrast
                 */
                &:focus {
                    color: settings.$ds_colour__focus;
                    position: relative;
                    z-index: 2; // [1]
                }
            }
        }

        &__table-caption {
            caption-side: bottom;
            line-height: 2;
            margin-top: 0.5rem;
            @include helpers.ds_tiny-size;
        }

        &__buttongroup {
            display: grid;
            gap: 0.5rem;
            grid-template-columns: 1fr 1fr;
            overflow: visible;

            .ds_button {
                margin: 0;
            }
        }
    }

    &__button {
        align-self: end;
        @include helpers.ds_small-size;
        @include helpers.ds_button-sizing--small;
    }
}

@include helpers.ds_media-query (medium) {
    .ds_datepicker {
        &__dialog {
            position: absolute;

            &__title {
                line-height: helpers.line-height-on-grid(settings.$small-size--medium, 1.5);
                padding: 0.5rem 0;
            }

            &__header {
                > :nth-child(1) {
                    // left: 8px;
                    top: 0;
                }

                > :nth-child(3) {
                    // right: 8px;
                    top: 0;
                }
            }

            &__table th {
                line-height: helpers.line-height-on-grid(settings.$small-size--medium, 2);
            }

            &__table-caption {
                line-height: helpers.line-height-on-grid(settings.$tiny-size--medium, 2);
            }
        }
    }
}