@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/variables';
@use 'mixin';
@use './variables.scss' as style;

.#{style.$calendar-prefix-cls} {
    position: relative;
    font-size: variables.$font-size-base;
    line-height: variables.$line-height-base;
    text-align: left;
    list-style: none;
    background-color: variables.$bg-panel;
    background-clip: padding-box;
    border: style.$border-width-base style.$border-style-base variables.$border-color;
    border-radius: variables.$border-radius-lg;
    outline: none;
    box-shadow: variables.$box-shadow;
    &-input {
        width: 100%;
        height: 22px;
        color: variables.$input-color;
        background: bootstrap-variables.$input-bg;
        border: 0;
        outline: 0;
        cursor: auto;
    }

    &-week-number {
        &-cell {
            text-align: center;
        }
    }

    &-header {
        @include mixin.calendarPanelHeader('thy-calendar');
    }

    &-body {
        padding: 8px 12px;
    }

    table {
        width: 100%;
        max-width: 100%;
        background-color: transparent;
        border-collapse: collapse;
    }

    table,
    th,
    td {
        text-align: center;
        border: 0;
    }

    &-calendar-table {
        margin-bottom: 0;
        border-spacing: 0;
    }

    &-column-header {
        width: 33px;
        padding: 6px 0;
        line-height: 18px;
        text-align: center;

        .#{style.$calendar-prefix-cls}-column-header-inner {
            display: block;
            font-weight: normal;
        }
    }

    &-cell {
        height: 30px;
        padding: 1px 0;
    }

    &-date {
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
        padding: 0;
        color: variables.$text-color;
        line-height: 22px;
        text-align: center;
        background: transparent;
        border: style.$border-width-base style.$border-style-base transparent;
        border-radius: variables.$border-radius-lg;
        transition: background 0.3s ease;
        &-panel {
            position: relative;
            outline: none;
            padding: 0;
            > div {
                position: relative;
            }
        }

        &:hover {
            background: style.$item-hover-bg;
            cursor: variables.$hand-cursor;
        }

        &:active {
            color: variables.$text-color-inverse;
            background: variables.$primary;
        }
    }

    &-today &-date {
        background-color: style.$item-hover-bg;
    }

    &-selected-day &-date {
        background: variables.$primary;
        color: variables.$white;
    }

    &-last-month-cell &-date,
    &-next-month-btn-day &-date {
        &,
        &:hover {
            color: style.$disabled-color;
            background: transparent;
            border-color: transparent;
        }
    }

    &-disabled-cell &-date {
        position: relative;
        border: style.$border-width-base style.$border-style-base transparent;
        color: style.$disabled-color;
        background: style.$disabled-bg !important;
        border-radius: 0;
        cursor: variables.$disabled-cursor;
        width: auto;

        &:hover {
            background: style.$disabled-bg;
        }
    }

    &-disabled-cell#{&}-today #{&}-date {
        background-color: style.$item-hover-bg;
    }

    &-disabled-cell-first-of-row #{&}-date {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    &-disabled-cell-last-of-row #{&}-date {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    &-footer {
        padding: 0 10px;
        line-height: 38px;
        border-top: style.$border-width-base style.$border-style-base style.$border-color-split;

        &:empty {
            border-top: 0;
        }

        &-btn {
            display: block;
            text-align: center;

            hr {
                margin: 12px 0;
            }
        }

        &-extra {
            text-align: left;
        }

        a {
            cursor: variables.$hand-cursor;

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

    .#{style.$calendar-prefix-cls}-today-btn,
    .#{style.$calendar-prefix-cls}-clear-btn {
        display: inline-block;
        margin: 0 0 0 8px;
        padding-left: 10px;
        text-align: center;

        &-disabled {
            color: style.$disabled-color;
            cursor: variables.$disabled-cursor;
        }

        &:only-child {
            margin: 0;
        }
    }

    .#{style.$calendar-prefix-cls}-clear-btn {
        position: absolute;
        top: 7px;
        right: 5px;
        display: none;
        width: 20px;
        height: 20px;
        margin: 0;
        overflow: hidden;
        line-height: 20px;
        text-align: center;
        text-indent: -76px;
    }

    .#{style.$calendar-prefix-cls}-clear-btn::after {
        display: inline-block;
        width: 20px;
        color: style.$disabled-color;
        font-size: variables.$font-size-base;
        line-height: 1;
        text-indent: 43px;
        transition: color 0.3s ease;
    }

    .#{style.$calendar-prefix-cls}-clear-btn:hover::after {
        color: variables.$secondary;
    }

    .#{style.$calendar-prefix-cls}-ok-btn {
        font-size: variables.$font-size-sm;
        min-width: auto;
        padding: 0 7px;
        height: 24px;
    }
}
