.mtp-clock {
    width: 275px;
    height: 275px;
    border-radius: 50%;
    background-color: $c-clock-face;
    margin: 10px auto;
    position: relative;
}
.mtp-clock__time {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        position: absolute;
        text-align: center;
        border-radius: 50%;
        top: 117.5px;
        left: 117.5px;

        &:hover:not(.mtp-clock--active) {
            background-color: $c-primary-light;
            cursor: pointer;
        }
    }
}
.mtp-clock__outer {
    @include clockNumbers(12, 235px, 40px);
    font-size: 16px;
}
.mtp-clock__inner {
    @include clockNumbers(12, 160px, 40px);
    position: absolute;
    font-size: 20px;
}
.mtp-clock--active {
    z-index: 444;
    background-color: $c-primary;
    color: $c-text;
}
.mtp-clock__hand {
    position: absolute;
    background-color: $c-primary;
    width: 2px;
    height: 100px;
    top: 136.5px;
    left: 136.5px;
    transform-origin: 1px 1px;
    transform: rotate(180deg);
}
.mtp-clock__center {
    position: absolute;
    background-color: $c-primary;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 133.5px;
    left: 133.5px;
}