@import 'variables';

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tempus-dominus-widget {
    list-style: none;
    padding: 4px;
    width: 19rem;
    border-radius: 4px;
    display: none;
    z-index: 9999;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);

    &.calendarWeeks {
        width: 21rem;

        & .date-container-days {
            grid-auto-columns: 12.5%;
            grid-template-areas: 'a a a a a a a a';
        }
    }

    [data-action] {
        cursor: pointer;

        &::after {
            @extend .visually-hidden;
            content: attr(title);
        }

        &.disabled,
        &.disabled:hover {
            background: none;
            cursor: not-allowed;
        }
    }

    //popper
    .arrow {
        display: none;
    }

    //end popper

    &.show {
        display: block;

        &.date-container {
            min-height: 315px;
        }

        &.time-container {
            min-height: 217px;
        }
    }

    .td-collapse {
        &:not(.show) {
            display: none;
        }
    }

    .td-collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

    &.timepicker-sbs {
        @media (min-width: 576px) {
            width: 38em;
        }

        @media (min-width: 768px) {
            width: 38em;
        }

        @media (min-width: 992px) {
            width: 38em;
        }

        .td-row {
            display: flex;

            .td-half {
                flex: 0 0 auto;
                width: 50%;
            }
        }
    }

    div[data-action]:active {
        box-shadow: none;
    }

    .timepicker-hour,
    .timepicker-minute,
    .timepicker-second {
        width: 54px;
        font-weight: bold;
        font-size: $td-timepicker-font-size;
        margin: 0;
    }

    button[data-action] {
        padding: 6px;
    }

    .toggleMeridiem {
        text-align: center;
        height: 38px;
    }

    .calendar-header {
        display: grid;
        grid-template-areas: 'a a a';
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: bold;

        & .next {
            text-align: right;
            padding-right: 10px;

            &:hover {
                color: $primary;
            }
        }

        & .previous {
            text-align: left;
            padding-left: 10px;

            &:hover {
                color: $primary;
            }
        }

        & .picker-switch {
            text-align: center;

            &:hover {
                color: $primary;
            }
        }

    }

    .toolbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-rows: 40px;

        & div {
            border-radius: $td-border-radius;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            display: flex;
        }
    }

    .date-container-days {
        display: grid;
        grid-template-areas: 'a a a a a a a';
        grid-auto-rows: 40px;
        grid-auto-columns: calc(100% / 7);

        .range-in {
            @extend .active;
            background-color: $td-range-bg !important;
            border: none;
            border-radius: 0 !important;
            box-shadow: -5px 0 0 $td-range-bg, 5px 0 0 $td-range-bg;
        }

        .range-end {
            @extend .active;
            border-radius: 0 50px 50px 0 !important;
        }

        .range-start {
            @extend .active;
            border-radius: 50px 0 0 50px !important;
        }

        & .dow {
            align-items: center;
            justify-content: center;
            text-align: center;
            color: $gray-600 !important;
        }

        & .cw {
            width: 90%;
            height: 90%;
            align-items: center;
            justify-content: center;
            display: flex;
            font-size: 0.8em;
            line-height: 20px;
            cursor: default;
        }
    }

    .date-container-decades,
    .date-container-years,
    .date-container-months {
        display: grid;
        grid-template-areas: 'a a a';
        grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);
    }

    .time-container-hour,
    .time-container-minute,
    .time-container-second {
        display: grid;
        grid-template-areas: 'a a a a';
        grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);
    }

    .time-container-clock {
        display: grid;
        grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);

        & .no-highlight {
            width: 80%;
            height: 80%;
            align-items: center;
            justify-content: center;
            display: flex;
        }
    }

    .date-container-decades,
    .date-container-years,
    .date-container-months,
    .date-container-days,
    .time-container-clock,
    .time-container-hour,
    .time-container-minute,
    .time-container-second {
        div:not(.no-highlight) {
            width: 100%;
            height: 100%;
            border-radius: $td-border-radius;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            display: flex;

            &.disabled,
            &.disabled:hover {
                background: none;
                cursor: not-allowed;
            }

            &.today {
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;
                    border: solid transparent;
                    border-width: 0 0 7px 7px;
                    position: absolute;
                    bottom: 6px;
                    right: 6px;
                }
            }
        }
    }

    .time-container {
        margin-bottom: 0.5rem;
    }

    button {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    &.tempus-dominus-widget-readonly {
        table td.day,
        table td.hour,
        table td.minute,
        table td.second,
        table td [data-action='incrementHours'],
        table td [data-action='incrementMinutes'],
        table td [data-action='incrementSeconds'],
        table td [data-action='decrementHours'],
        table td [data-action='decrementMinutes'],
        table td [data-action='decrementSeconds'],
        table td [data-action='showHours'],
        table td [data-action='showMinutes'],
        table td [data-action='showSeconds'],
        table td [data-action='togglePeriod'] {
            pointer-events: none;
            cursor: default;

            &:hover {
                background: none;
            }
        }
    }

    &.light {
        color: $td-font-color;
        background-color: $td-widget-background;

        [data-action] {
            &.disabled,
            &.disabled:hover {
                color: $td-disabled-color;
            }
        }

        .toolbar {
            & div {
                &:hover {
                    background: $td-btn-hover-bg;
                }
            }
        }

        .date-container-days {
            & .dow {
                color: $td-dow-color;
            }

            & .cw {
                color: $td-alternate-color;
            }
        }

        .date-container-decades,
        .date-container-years,
        .date-container-months,
        .date-container-days,
        .time-container-clock,
        .time-container-hour,
        .time-container-minute,
        .time-container-second {
            div:not(.no-highlight) {
                &:hover {
                    background: $td-btn-hover-bg;
                }

                &.active {
                    background-color: $td-active-bg;
                    color: $td-active-color;
                    text-shadow: $td-text-shadow;

                    &.old,
                    &.new {
                        color: $td-active-color;
                    }
                }

                &.active.today:before {
                    border-bottom-color: $td-active-border-color;
                }

                &.old,
                &.new {
                    color: $td-alternate-color;
                }

                &.disabled,
                &.disabled:hover {
                    color: $td-disabled-color;
                }

                &.today {
                    &:before {
                        border-bottom-color: $td-active-bg;
                        border-top-color: $td-secondary-border-color-rgba;
                    }
                }
            }
        }

        button {
            color: $td-active-color;
            background-color: $td-active-bg;
            border-color: $td-active-bg;
        }
    }

    &.dark {
        color: $td-dark-font-color;
        background-color: $td-dark-widget-background;

        [data-action] {
            &.disabled,
            &.disabled:hover {
                color: $td-dark-disabled-color;
            }
        }

        .toolbar {
            & div {
                &:hover {
                    background: $td-dark-btn-hover-bg;
                }
            }
        }

        .date-container-days {
            & .dow {
                color: $td-dark-dow-color;
            }

            .range-in {
                background-color: $td-dark-range-bg !important;
                box-shadow: -5px 0 0 $td-dark-range-bg, 5px 0 0 $td-dark-range-bg;
            }

            & .cw {
                color: $td-dark-alternate-color;
            }
        }

        .date-container-decades,
        .date-container-years,
        .date-container-months,
        .date-container-days,
        .time-container-clock,
        .time-container-hour,
        .time-container-minute,
        .time-container-second {
            div:not(.no-highlight) {
                &:hover {
                    background: $td-dark-btn-hover-bg;
                }

                &.active {
                    background-color: $td-dark-active-bg;
                    color: $td-dark-active-color;
                    text-shadow: $td-dark-text-shadow;

                    &.old,
                    &.new {
                        color: $td-dark-active-color;
                    }
                }

                &.active.today:before {
                    border-bottom-color: $td-dark-active-border-color;
                }

                &.old,
                &.new {
                    color: $td-dark-alternate-color;
                }

                &.disabled,
                &.disabled:hover {
                    color: $td-dark-disabled-color;
                }

                &.today {
                    &:before {
                        border-bottom-color: $td-dark-active-bg;
                        border-top-color: $td-dark-secondary-border-color-rgba;
                    }
                }
            }
        }

        button {
            color: $td-dark-active-color;
            background-color: $td-dark-active-bg;
            border-color: $td-dark-active-bg;
        }
    }
}