@use '../../style/colors';

.date {
    margin-top: 0;
}

.timebox {
    margin: 30px 0;

    .time-container {
        .content {
            font-weight: bolder;
            font-size: 60px;
        }

        .divider {
            margin: 8px 15px;
            padding: 0 1px;
            background: linear-gradient(colors.$red, colors.$magenta, colors.$blue, colors.$cyan);
        }
    }

    .date-container {
        margin-top: 2px;
    }
}

.cal-box {
    padding: 0 1rem .2rem;
    margin: 0 12px 18px;

    calendar {
        font-size: 20px;
        background-color: inherit;
        padding: .5rem .10rem 0;
        margin-left: 10px;

        &>* {
            border: solid 0 transparent;
        }

        &.highlight {
            padding: 10rem;
        }
    }
}

calendar:selected {
    color: colors.$cyan;
}

calendar.header {
    color: colors.$cyan;
    font-weight: bold;
}

calendar.button {
    color: colors.$cyan;
}

calendar.highlight {
    color: colors.$green;
    font-weight: bold;
}

calendar:indeterminate {
    color: colors.$lightblack;
}