@import "../../include/vars";

:root {
    --analog-clock-size: 300px;
    --analog-clock-icon-size: 100px;
    --analog-clock-border-color: #6a6a6a;
    --analog-clock-dash-color: #191919;
    --analog-clock-background: var(--default-background);
    --analog-clock-color: var(--default-color);
    --analog-clock-hour-color: var(--color-dark);
    --analog-clock-minute-color: var(--color-dark);
    --analog-clock-second-color: var(--color-red);    
    --analog-clock-hand-border-color: #ccc;
    --analog-clock-inset-border-color: #e6e6e6;
    --analog-clock-inset-shadow: rgba(0,0,0,0.45);
}

.dark-side {
    --analog-clock-border-color: #6a6a6a;
    --analog-clock-dash-color: #efefef;
    --analog-clock-background: var(--default-background);
    --analog-clock-color: var(--default-color);
    --analog-clock-hour-color: #cdcdcd;
    --analog-clock-minute-color: #cdcdcd;
    --analog-clock-second-color: var(--color-red);
    --analog-clock-hand-border-color: #efefef;
    --analog-clock-inset-border-color: #333333;
    --analog-clock-inset-shadow: #919191;
}

.analog-clock {
    --i: 0;
    --i2: 0;
    position: relative;
    display: flex;
    height: var(--analog-clock-size);
    width: var(--analog-clock-size);
    aspect-ratio: 1;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1);
    font-size: calc(var(--analog-clock-size) / 9);
    line-height: 1;
    text-align: center;
    color: var(--analog-clock-color);
    font-weight: 100;
}

.analog-clock {
    .icon, .moon {
        position: absolute;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        height: var(--analog-clock-icon-size);
        width: var(--analog-clock-icon-size);
        top: calc(var(--analog-clock-size) / 6);
        left: 50%;
        transform: translateX(-50%);
        font-size: calc(var(--analog-clock-size) / 12.5);
        
        * {
            font-size: calc(var(--analog-clock-size) / 12.5);
            font-weight: 600;
            color: var(--analog-clock-color);
            width: 100%;
            height: 100%;
        }
    }
    
    .moon {
        width: calc(var(--analog-clock-size) / 9);
        height: calc(var(--analog-clock-size) / 9);
    }
    
    .day-month {
        position: absolute;
        display: inline-flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        height: auto;
        width: auto;
        right: calc(var(--analog-clock-size) / 8.5);
        top: 50%;
        transform: translateY(-50%);
        font-size: calc(var(--analog-clock-size) / 21.4);
        color: var(--analog-clock-color);
        background: var(--analog-clock-background);
        font-weight: 600;
        padding: 1px 2px;
        box-shadow: 0 0 2px 0 var(--analog-clock-inset-shadow) inset;
        font-family: monospace;
        
        .day-month-inner {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }
        
        .day, .month, .week-day {
            padding: 2px 6px;
            width: 50%;
        }
        
        .week-day {
            border-top: 1px solid var(--analog-clock-inset-border-color);
            width: 100%;
        }
        
        .day {
            border-right: 1px solid var(--analog-clock-inset-border-color);
            font-family: digital, monospace;
            letter-spacing: 2px;
        }
    }
    
    .dash {
        position: absolute;
        inset: calc(var(--analog-clock-size) / 30);
        text-align: center;
        transform: rotate(calc(var(--i) * (360deg / 12)));
        font-size: calc(var(--analog-clock-size) / 15);
        
        span {
            display: inline-block;
            font-weight: 600;
            color: var(--analog-clock-dash-color);
        }
    }
       
    &.show-numbers {
        label {
            color: var(--analog-clock-color);
            font-family: digital, monospace;
            span {
                transform: rotate(calc(var(--i) * (-360deg / 12)));
            }
        }
    }
    
    .secondary-dash {
        position: absolute;
        inset: calc(var(--analog-clock-size) / 30);
        text-align: center;
        transform: rotate(calc(var(--i2) * 6 * 1deg));
        font-size: calc(var(--analog-clock-size) / 30);

        span {
            display: inline-block;
            font-weight: 600;
            color: var(--analog-clock-dash-color);
        }
    }
    
    .hands {
        position: absolute;
        height: calc(var(--analog-clock-size) / 30);
        width: calc(var(--analog-clock-size) / 30);
        display: flex;
        justify-content: center;
        z-index: 2;
        
        &::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 3;
            background: var(--analog-clock-hour-color);
            border: 2px solid var(--analog-clock-second-color);
            border-radius: 50%;
        }
        
        .hour-hand, .minute-hand, .second-hand {
            z-index: -1;
        }
        
        .minute, .hour, .second {
            position: absolute;
            height: calc(var(--analog-clock-size) / 2.7);
            width: calc(var(--analog-clock-size) / 75);
            bottom: calc(var(--analog-clock-size) / 60);
            border-radius: calc(var(--analog-clock-size) / 12);
            transform-origin: bottom;
        }
        
        .minute, .hour {
            border: 1px solid var(--analog-clock-hand-border-color);
        }
        
        .second {
            background: var(--analog-clock-second-color);
            width: 2px;
        }
        
        .hour {
            height: calc(var(--analog-clock-size) / 3.75);
            width: calc(var(--analog-clock-size) / 37.5);
            background: var(--analog-clock-hour-color);
        }
        
        .minute {
            height: calc(var(--analog-clock-size) / 3);
            width: calc(var(--analog-clock-size) / 60);
            background: var(--analog-clock-minute-color);
        }
    }
    
    .digital-clock {
        width: calc(var(--analog-clock-size) / 3.5);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: calc(var(--analog-clock-size) / 5);
        left: 50%;
        transform: translateX(-50%);
        font-size: calc(var(--analog-clock-size) / 16);
        border-radius: 2px;
        background: var(--analog-clock-background);
        font-weight: 700;
        padding: 1px;
        box-shadow: 0 0 2px 0 var(--analog-clock-inset-shadow) inset;
        font-family: monospace;
        letter-spacing: 2px;

        .dc-hour, .dc-minute, .dc-second {
            width: calc(var(--analog-clock-size) / 10);
            display: inline-flex;
            padding: calc(var(--analog-clock-size) / 75) calc(var(--analog-clock-size) / 75);
            position: relative;
            font-family: digital, monospace;
        }
        
        .dc-minute {
            &::before, &::after {
                position: absolute;
                content: ':';
                display: block;
                color: #c6c6c6;
                top: 50%;
                transform: translateY(-50%);
                font-weight: 900;
            }
            &::before {
                left: -2px;
            }
            
            &::after {
                right: -2px;
            }
        }
    }

    &.tick {
        .dc-minute {
            &::before, &::after {
                display: none;
            }
        }
    }
}

.analog-clock {
    .moon {
        left: calc(var(--analog-clock-size) / 7.5);
        top: 50%;
        transform: translate(0, -50%);
        
        &.new-moon { &::before { content: '🌑'; } }
        &.waxing-crescent { &::before { content: '🌒'; } }
        &.first-quarter { &::before { content: '🌓'; } }
        &.waxing-gibbous { &::before { content: '🌔'; } }
        &.full-moon { &::before { content: '🌕'; } }
        &.waning-gibbous { &::before { content: '🌖'; } }
        &.last-quarter { &::before { content: '🌗'; } }
        &.waning-crescent { &::before { content: '🌘'; } }
    }
}