@use '../../styles/variables';

$calendar-full-prefix-cls: 'thy-calendar-full';

.#{$calendar-full-prefix-cls} {
    display: block;
    padding: 9px 9px 13px 9px;
    height: 100%;

    .thy-calendar-panel {
        height: calc(100% - 33px);
        .thy-calendar-date-panel {
            height: 100%;
            .thy-calendar-body {
                height: 100%;
            }
        }
    }

    .#{$calendar-full-prefix-cls}-cell:focus-within {
        outline: none;
        position: relative;
        .#{$calendar-full-prefix-cls}-date {
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: variables.$calendar-active-box-shadow;
            background: variables.$bg-default;
            width: 100%;
            min-height: 100%;
            z-index: 2;
            outline: none;

            .#{$calendar-full-prefix-cls}-date-content {
                height: auto;
            }
        }
    }

    .#{$calendar-full-prefix-cls}-table {
        table-layout: fixed;
        width: 100%;
        height: 100%;
        thead {
            font-size: 14px;
            color: variables.$gray-500;
        }

        .#{$calendar-full-prefix-cls}-column-header,
        .#{$calendar-full-prefix-cls}-cell {
            text-align: left;
            font-weight: 400;
        }

        .#{$calendar-full-prefix-cls}-today {
            .#{$calendar-full-prefix-cls}-date-value-today-text {
                width: 24px;
                height: 24px;
                background: #ff9f73;
                display: inline-block;
                text-align: center;
                line-height: 24px;
                border-radius: 50%;
                color: variables.$white;
            }
        }

        .#{$calendar-full-prefix-cls}-column-header,
        .#{$calendar-full-prefix-cls}-cell .#{$calendar-full-prefix-cls}-date-value {
            padding: 10px;
            min-height: 44px;
        }

        .#{$calendar-full-prefix-cls}-last-month-cell,
        .#{$calendar-full-prefix-cls}-next-month-btn-day {
            color: variables.$gray-500;
        }

        .#{$calendar-full-prefix-cls}-tbody {
            border: 1px solid variables.$gray-200;
            border-collapse: collapse;

            tr td:first-child,
            tr td:last-child {
                background: variables.$gray-80;
            }

            td {
                border: 1px solid variables.$gray-200;

                .#{$calendar-full-prefix-cls}-date-content {
                    height: 126px;
                    padding: 0 6px;
                    overflow: auto;
                }
            }
        }
    }
}

.#{$calendar-full-prefix-cls}-header-container {
    align-items: center;
    display: flex;
    min-height: 33px;
    padding: 0 12px;

    .#{$calendar-full-prefix-cls}-header-left {
        display: flex;
        align-items: center;
        .select-date-range {
            display: inline-block;
            margin-right: 15px;
        }
    }

    .#{$calendar-full-prefix-cls}-header-right {
        margin-left: auto;
    }
}
