@use "variables" as *;
@import "mixins";
@import "common";
@import "../buttons/common";

// Input with Button
.p-calendar.p-calendar-w-btn {
    border-radius: $border-radius-md;
    height: $field-height-md;
    box-sizing: border-box;
    border: $field-border-size solid $color-palette-gray-400;

    input {
        height: auto;
        @include truncate-text;
    }

    &:focus-within {
        background-color: transparent;
        @include field-focus;
    }

    &:hover {
        border-color: var(--color-palette-primary-400);
    }

    &.p-calendar-disabled {
        border-color: $color-palette-gray-200;
    }

    input.p-inputtext,
    input.p-inputtext:focus,
    input.p-inputtext:hover,
    .p-button:focus {
        outline: transparent;
        border-right: none;
        border-color: transparent;
    }

    .p-button:disabled.p-datepicker-trigger,
    .p-button:enabled.p-datepicker-trigger {
        height: auto;
        aspect-ratio: 1/1;
        background-color: $color-palette-gray-200;
        color: $color-palette-primary;
        border-radius: 0 $border-radius-sm $border-radius-sm 0;

        .pi {
            width: $icon-lg-box;
            font-size: $icon-lg;
        }

        .p-icon-wrapper {
            color: $color-palette-primary-500;
        }
    }

    .p-button:enabled.p-datepicker-trigger .pi {
        color: $color-palette-primary-500;
    }
}

.p-datepicker {
    padding: $spacing-3;
    background: $white;
    color: $black;
    border-radius: $border-radius-md;

    &:not(.p-datepicker-inline) {
        margin-top: $spacing-3;
        box-shadow: $shadow-l;
        min-width: auto;
        display: flex;
        flex-direction: column;
        gap: $spacing-3;
    }

    // Days/Month/Year containers
    .p-datepicker-calendar span,
    .p-monthpicker span,
    .p-yearpicker span {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        border-radius: 50%;
        transition: background-color $basic-speed;
        color: $black;

        &:hover {
            cursor: pointer;
            background: $color-palette-primary-op-10;
        }

        &.p-disabled {
            color: $color-palette-gray-500;
        }

        &.p-highlight:not(.p-disabled) {
            // Selected
            background: $color-palette-primary-op-10;
            color: $color-accessible-text-blue;
        }
    }

    // DatePicker
    .p-datepicker-group {
        display: flex;
        flex-direction: column;
        gap: $spacing-3;

        // Header
        .p-datepicker-header {
            color: $black;
            background: $white;
            margin: 0;
            min-height: 40px;

            .p-datepicker-title {
                line-height: $spacing-5;
                display: flex;
                gap: $spacing-1;

                // Header Buttons
                .p-datepicker-year,
                .p-datepicker-month,
                .p-datepicker-decade {
                    font-size: $font-size-lmd;
                    font-family: $font-default;
                    font-weight: $font-weight-regular-bold;
                    color: inherit;

                    &:hover {
                        color: $color-palette-primary-500;
                    }
                }
            }

            .p-datepicker-prev,
            .p-datepicker-next {
                height: $field-height-md;
                width: $field-height-md;
                border-radius: 50%;
                color: $color-palette-primary-500;

                @extend #outlined-primary-severity;
            }
        }

        // Calendar
        table.p-datepicker-calendar {
            tbody {
                gap: $spacing-1;
                display: flex;
                flex-direction: column;
            }

            tr {
                display: flex;
                gap: $spacing-1;
            }

            td,
            th {
                border-spacing: 0;
                padding: 0;
                margin: 0;
                color: $black;
            }

            th {
                font-size: $font-size-md;
                font-weight: $font-weight-semi-bold;
            }

            span {
                width: $spacing-6;
                height: $spacing-6;
            }

            th > span {
                width: $spacing-6;
                height: 22px;
            }

            td.p-datepicker-today > span:not(.p-highlight) {
                background: $color-palette-gray-300;
                border-color: transparent;
            }
        }
    }

    .p-timepicker {
        gap: $spacing-0;
        border-top: 1px solid $color-palette-gray-300;
        padding: $spacing-3;

        button {
            width: $icon-lg-box;
            height: auto;
            aspect-ratio: 1/1;
            font-size: $icon-lg;
            color: $color-palette-primary-500;
        }

        span {
            font-size: $font-size-md;
            font-weight: $font-weight-regular-bold;
            width: $spacing-5;
            height: $spacing-5;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }

        button {
            border-radius: $border-radius-sm;

            @extend #text-primary-severity;
        }
    }

    &.p-datepicker-timeonly .p-timepicker {
        border-top: 0 none;
    }

    // Monthpicker and Yearpicker
    .p-monthpicker,
    .p-yearpicker {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: $spacing-1;
        width: 328px;

        span {
            width: $spacing-9;
            height: $spacing-6;
            border-radius: 100px;
        }
    }
}

p-calendar.p-calendar-clearable {
    .p-inputtext {
        padding-right: $spacing-6;
    }

    .p-calendar-clear-icon {
        margin-top: -0.438rem;
        color: $color-palette-primary;
        width: $icon-lg-box;
        font-size: $icon-lg;
        right: 44px;

        &:hover {
            color: $color-palette-primary-600;
        }
    }
}
