AnalogueClockComponent {
    position: absolute;
    top: 155px;
    left: 93%;
    box-shadow: 1px 1px 30px #000;
    border-radius: 30px;
    z-index: 9000;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.63);
    color: white;
    border-bottom: 2px dashed transparent;
    box-shadow: 3px 3px 8px black;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.analogue-clock-component-root {
    // Options
    $black: #1b1e23;
    $size: 120px;
    $white: #f4eed7;
    $feature : #4b9aaa;

    .clock {
        height: $size;
        width: $size;
        border-radius: #{calc($size / 2)};
        display: flex;
        justify-content: center;
        position: relative;
        &__second,
        &__minute,
        &__hour, &__indicator {
            position: absolute;
            left: calc(50% - 1px);
            width: 2px;
            background: $white;
            transform-origin: bottom center;
            z-index: 2;
            border-radius: 1px;
        }
        &__second {
            height: #{(calc($size / 2)) - 10};
            margin-top: 10px;
            background: $feature;
            animation: time 60s infinite steps(60);
            z-index: 3;
        }
        &__minute {
            height: #{calc($size / 2) - 20};
            margin-top: 20px;
            opacity: 0.75;
            animation: time 3600s linear infinite;
        }
        &__hour {
            height: #{calc($size / 2) - 40};
            margin-top: 40px;
            animation: time 43200s linear infinite;
        }
        &__indicator {
            height: #{calc($size / 2) - 2};
            border-top: 2px solid $feature;
            background: none;
        }
        &__indicator:nth-of-type(5n) {
            opacity: 1;
            height: #{calc($size / 2) - 7};
            border-top: 7px solid $white;
        }
        &__axis {
            background: $feature;
            width: 5px;
            height: 5px;
            border-radius: 3px;
            position: absolute;
            z-index: 4;
            top: #{calc($size / 2) - 3};
            
        }
    }

    @for $i from 1 through 60 {
        section:nth-of-type(#{$i}) {
            transform: rotateZ(calc(6deg * #{$i}));
        }
    }

    @keyframes time {
        to {
            transform: rotateZ(360deg);
        }
    }
}
