@import '../../../styles/theme/index.less';

@mi-clock: ~'@{mi-prefix}clock';

.@{mi-clock} {
    .properties(width, 240);
    .properties(height, 240);
    .border-radius-circle();
    box-shadow: 0 0 10px var(--mi-clock-shadow, @mi-clock-shadow);
    font-family: Avenir Next, Helvetica, Arial, sans-serif;
    position: relative;
    background-color: var(--mi-clock-bg, @mi-clock-bg);
    background-image: linear-gradient(315deg, var(--mi-clock-bg-grandient-s, @mi-clock-bg-grandient-s) 0%, var(--mi-clock-bg-grandient-e, @mi-clock-bg-grandient-e) 74%);

    &-calibration {
        position: absolute;
        top: 50%;
        left: 50%;
    }

    &-anchor {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
    }

    &-mins-line {
        position: absolute;
        left: 0;
        top: 0;
        background: var(--mi-clock-minute-line, @mi-clock-minute-line);
        .properties(width, 1);
        .properties(height, 10);
    }

    &-mins-text,
    &-hour-text {
        color: var(--mi-font, @mi-font);
        transform: translate(-50%, -50%);
        .properties(font-size, 12);
        position: absolute;
    }

    &-hour-text {
        color: var(--mi-font, @mi-font);
        .properties(font-size, 28);
    }

    &-pointer {
        position: absolute;
        left: 50%;
        top: 50%;
        .properties(width, 12);
        .properties(height, 12);
        background: var(--mi-clock-pointer-bg, @mi-clock-pointer-bg);
        transform: translate(-50%, -50%);
        .border-radius-circle();

        &-mid {
            .properties(width, 8);
            .properties(height, 8);
            background: var(--mi-theme, @mi-theme);
        }

        &-top {
            .properties(width, 4);
            .properties(height, 4);
            background: var(--mi-clock-pointer-top-bg, @mi-clock-pointer-top-bg);
        }
    }

    &-point {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
    }

    &-hand {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -100%);
        .properties(width, 4);
        .properties(height, 50);
        background: var(--mi-clock-pointer-hand-bg, @mi-clock-pointer-hand-bg);

        &-fat {
            .properties(width, 10);
            .border-radius(10);
            transform: translate(-50%,-100%) translateY(-1.125rem);
        }

        &-second {
            background: transparent linear-gradient(127deg, var(--mi-gradient-theme-s, @mi-gradient-theme-s) 0%, var(--mi-gradient-theme-m, @mi-gradient-theme-m) 52%, var(--mi-gradient-theme-e, @mi-gradient-theme-e) 100%);
            .properties(width, 2);
            transform: translate(-50%, -100%) translateY(1.5rem);
        }
    }
}