@use './mixins/mixins' as *;

@include b('calendar') {
    user-select: none;
    background-color: var(--el-color-white);
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 3px;

    @include e('head') {
        font-size: 14px;
        text-align: center;
        border-bottom: 1px solid var(--el-border-color);
        padding: 15px;
        box-sizing: border-box;
    }

    @include e('body') {
        padding: 10px 15px 15px;
    }
}

@include b('calendar-panel') {
    width: 100%;
    color: var(--el-text-color-primary);
  
    thead th {
        padding: 12px 0;
        font-weight: 400;
    }

    tbody {
        tr:first-child td {
            border-top: 1px solid var(--el-border-color);
        }

        td {
            border-bottom: 1px solid var(--el-border-color);
            border-right: 1px solid var(--el-border-color);

            &:first-child {
                border-left: 1px solid var(--el-border-color);
            }

            &.prev,
            &.next {
                color: var(--el-text-color-placeholder);
            }

            @include when('today') {
                color: var(--el-primary-color);
            }

            @include when('selected') {
                background-color: var(--el-color-primary-light-9);
                color: var(--el-primary-color);
            }
        }
    }

    @include e('day') {
        min-height: 40px;
        padding: 4px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
            background-color: var(--el-color-primary-light-9);
        }
    }
}