// core
.p-calendar {
    display: inline-flex;
    max-width: 100%;
}

.p-calendar .p-inputtext {
    flex: 1 1 auto;
    width: 1%;
}

.p-calendar-w-btn .p-inputtext {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.p-calendar-w-btn .p-datepicker-trigger {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.p-calendar .p-datepicker-trigger-icon {
    cursor: pointer;
}

/* Fluid */
.p-fluid .p-calendar {
    display: flex;
}

.p-fluid .p-calendar .p-inputtext {
    width: 1%;
}

/* Datepicker */
.p-calendar .p-datepicker {
    min-width: 100%;
}

.p-datepicker {
    width: auto;
}

.p-datepicker-inline {
    display: inline-block;
    overflow-x: auto;
}

/* Header */
.p-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-datepicker-header .p-datepicker-title {
    margin: 0 auto;
}

.p-datepicker-prev,
.p-datepicker-next {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
    display: flex;
}

.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
    flex: 1 1 auto;
}

/* DatePicker Table */
.p-datepicker table {
    width: 100%;
    border-collapse: collapse;
}

.p-datepicker td > span {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* Month Picker */
.p-monthpicker-month {
    width: 33.3%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

/* Year Picker */
.p-yearpicker-year {
    width: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

/*  Button Bar */
.p-datepicker-buttonbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Time Picker */
.p-timepicker {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-timepicker button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.p-timepicker > div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
    min-width: 80vw;
}

// theme
.p-calendar {
    &.p-invalid.p-component > .p-inputtext {
        @include invalid-input();
    }

    &:not(.p-calendar-disabled).p-focus > .p-inputtext {
        @include focused-input();
    }
}

.p-datepicker {
    padding: $calendarPadding;
    background: $calendarInlineBg;
    color: $calendarTextColor;
    border: $calendarBorder;
    border-radius: $borderRadius;

    &:not(.p-datepicker-inline) {
        background: $calendarBg;
        border: $calendarOverlayBorder;
        box-shadow: $inputOverlayShadow;

        .p-datepicker-header {
            background: $calendarHeaderBg;
        }
    }

    .p-datepicker-header {
        padding: $calendarHeaderPadding;
        color: $calendarHeaderTextColor;
        background: $calendarInlineHeaderBg;
        font-weight: $calendarHeaderFontWeight;
        margin: $inputListHeaderMargin;
        border-bottom: $calendarHeaderBorder;
        border-top-right-radius: $borderRadius;
        border-top-left-radius: $borderRadius;

        .p-datepicker-prev,
        .p-datepicker-next {
            @include action-icon();
        }

        .p-datepicker-title {
            line-height: $actionIconHeight;

            .p-datepicker-year,
            .p-datepicker-month {
                color: $calendarHeaderTextColor;
                transition: $actionIconTransition;
                font-weight: $calendarHeaderFontWeight;
                padding: $calendarHeaderCellPadding;

                &:enabled:hover {
                    color: $calendarMonthYearHeaderHoverTextColor;
                }
            }

            .p-datepicker-month {
                margin-right: $inlineSpacing;
            }
        }
    }

    table {
        font-size: $fontSize;
        margin: $calendarTableMargin;

        th {
            padding: $calendarHeaderCellPadding;

            > span {
                width: $calendarCellDateWidth;
                height: $calendarCellDateHeight;
            }
        }

        td {
            padding: $calendarCellDatePadding;

            > span {
                width: $calendarCellDateWidth;
                height: $calendarCellDateHeight;
                border-radius: $calendarCellDateBorderRadius;
                transition: $listItemTransition;
                border: $calendarCellDateBorder;
                outline-color: transparent;

                &.p-highlight {
                    color: $highlightTextColor;
                    background: $highlightBg;
                }

                &:focus {
                    @include focused();
                }
            }

            &.p-datepicker-today {
                > span {
                    background: $calendarCellDateTodayBg;
                    color: $calendarCellDateTodayTextColor;
                    border-color: $calendarCellDateTodayBorderColor;

                    &.p-highlight {
                        color: $highlightTextColor;
                        background: $highlightBg;
                    }
                }
            }
        }
    }

    .p-datepicker-buttonbar {
        padding: $calendarButtonBarPadding;
        border-top: $divider;

        .p-button {
            width: auto;
        }
    }

    .p-timepicker {
        border-top: $divider;
        padding: $calendarTimePickerPadding;

        button {
            @include action-icon();

            &:last-child {
                margin-top: 0.2em;
            }
        }

        span {
            font-size: $calendarTimePickerTimeFontSize;
        }

        > div {
            padding: $calendarTimePickerElementPadding;
        }
    }

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

    .p-monthpicker {
        margin: $calendarTableMargin;

        .p-monthpicker-month {
            padding: $calendarCellDatePadding;
            transition: $listItemTransition;
            border-radius: $borderRadius;

            &.p-highlight {
                color: $highlightTextColor;
                background: $highlightBg;
            }
        }
    }

    .p-yearpicker {
        margin: $calendarTableMargin;

        .p-yearpicker-year {
            padding: $calendarCellDatePadding;
            transition: $listItemTransition;
            border-radius: $borderRadius;

            &.p-highlight {
                color: $highlightTextColor;
                background: $highlightBg;
            }
        }
    }

    &.p-datepicker-multiple-month {
        .p-datepicker-group {
            border-left: $divider;
            padding-right: $calendarPadding;
            padding-left: $calendarPadding;
            padding-top: 0;
            padding-bottom: 0;

            &:first-child {
                padding-left: 0;
                border-left: 0 none;
            }

            &:last-child {
                padding-right: 0;
            }
        }
    }

    &.p-datepicker-mobile {
        table {
            th,
            td {
                padding: $calendarCellDatePaddingSM;
            }
        }
    }

    &:not(.p-disabled) {
        table {
            td {
                span:not(.p-highlight):not(.p-disabled) {
                    outline-color: transparent;

                    &:hover {
                        background: $calendarCellDateHoverBg;
                    }

                    &:focus {
                        @include focused();
                    }
                }
            }
        }

        .p-monthpicker {
            .p-monthpicker-month {
                &:not(.p-disabled) {
                    outline-color: transparent;

                    &:not(.p-highlight):hover {
                        background: $calendarCellDateHoverBg;
                    }

                    &:focus {
                        @include focused();
                    }
                }
            }
        }

        .p-yearpicker {
            .p-yearpicker-year {
                &:not(.p-disabled) {
                    outline-color: transparent;

                    &:not(.p-highlight):hover {
                        background: $calendarCellDateHoverBg;
                    }

                    &:focus {
                        @include focused();
                    }
                }
            }
        }
    }
}
