@use '../../styles/variables';
@use './variables.scss' as style;

@mixin calendarPanelHeader($calendar-prefix-cls) {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    user-select: none;
    border-bottom: 1px solid variables.$gray-200;
    a {
        cursor: variables.$hand-cursor;

        &:hover {
            color: variables.$link-hover-color;
        }
    }

    .#{$calendar-prefix-cls}-century-select,
    .#{$calendar-prefix-cls}-decade-select,
    .#{$calendar-prefix-cls}-year-select,
    .#{$calendar-prefix-cls}-month-select {
        display: inline-block;
        padding: 0 2px;
        color: style.$heading-color;
        line-height: 40px;
    }

    .#{$calendar-prefix-cls}-prev-century-btn,
    .#{$calendar-prefix-cls}-next-century-btn,
    .#{$calendar-prefix-cls}-prev-decade-btn,
    .#{$calendar-prefix-cls}-next-decade-btn,
    .#{$calendar-prefix-cls}-prev-month-btn,
    .#{$calendar-prefix-cls}-next-month-btn,
    .#{$calendar-prefix-cls}-prev-year-btn,
    .#{$calendar-prefix-cls}-next-year-btn {
        position: absolute;
        top: 0;
        display: inline-block;
        color: variables.$secondary;
        font-size: 16px;
        font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
        line-height: 40px;
        color: variables.$gray-500;
    }

    .#{$calendar-prefix-cls}-prev-century-btn,
    .#{$calendar-prefix-cls}-prev-decade-btn,
    .#{$calendar-prefix-cls}-prev-year-btn {
        left: 10px;
        line-height: 42px;
        .thy-icon {
            font-size: 18px;
        }
    }

    .#{$calendar-prefix-cls}-next-century-btn,
    .#{$calendar-prefix-cls}-next-decade-btn,
    .#{$calendar-prefix-cls}-next-year-btn {
        right: 10px;
        line-height: 42px;
        .thy-icon {
            font-size: 18px;
        }
    }

    .#{$calendar-prefix-cls}-prev-month-btn {
        left: 30px;
    }

    .#{$calendar-prefix-cls}-next-month-btn {
        right: 30px;
    }
}

@mixin calendar-selected-cell {
    .#{style.$calendar-prefix-cls}-date {
        color: variables.$white !important;
        background: variables.$primary;
        border: style.$border-width-base style.$border-style-base transparent;

        &:hover {
            background: variables.$primary;
        }
    }
}

// Placeholder text
@mixin placeholder($color: variables.$input-placeholder-color) {
    // Firefox
    &::-moz-placeholder {
        color: $color;
        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
    }
    // Internet Explorer 10+
    &:-ms-input-placeholder {
        color: $color;
    }
    // Safari and Chrome
    &::-webkit-input-placeholder {
        color: $color;
    }

    &:placeholder-shown {
        text-overflow: ellipsis;
    }
}
