@import 'colorthemes.less';

@default-color:#ccc;
@default-bar-color:#307bbb;
@default-fill-color:#f5f5f5;

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.transform-rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

.transform-scale(@amount) {
    -webkit-transform: scale(@amount);
    -moz-transform: scale(@amount);
    -ms-transform: scale(@amount);
    -o-transform: scale(@amount);
    transform: scale(@amount);
}

.transition-transform(@timing, @function) {
    -webkit-transition: -webkit-transform @timing @function;
    -moz-transition: -moz-transform @timing @function;
    -ms-transition: -ms-transform @timing @function;
    -o-transition: -o-transform @timing @function;
    transition: transform @timing @function;
}

.rect-auto, .percircle.gt50 .slice {
    clip: rect(auto, auto, auto, auto);
}

.pie, .percircle .bar, .gt50 .fill {
    position: absolute;
    border: 0.08em solid @default-bar-color;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0, 0.5em, 1em, 0);
    .border-radius(50%);
    .transform-rotate(0deg)
}

.bar {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pie-fill, .gt50 .bar:after, .gt50 .fill {
    .transform-rotate(180deg)
}

.percircle {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    .border-radius(50%);
    float: left;
    margin: 0 0.1em 0.1em 0;
    background-color: @default-color;

    & *, & *:before, & *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    &.animate {
        & > span, &:after {
            .transition-transform(0.2s, ease-in-out);
        }
        .bar {
            .transition-transform(0.6s, ease-in-out);
        }
    }

    &.center {
        float: none;
        margin: 0 auto;
    }

    &.big {
        font-size: 240px;
    }

    &.small {
        font-size: 80px;
    }

    & > span {
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 50%;
        height: 1em;
        margin-top: -0.5em;
        font-size: 0.2em;
        color: #cccccc;
        display: block;
        text-align: center;
        white-space: nowrap;
    }

    &:after {
        position: absolute;
        top: 0.08em;
        left: 0.08em;
        display: block;
        content: " ";
        .border-radius(50%);
        background-color: @default-fill-color;
        width: 0.84em;
        height: 0.84em;
    }

    & .slice {
        position: absolute;
        width: 1em;
        height: 1em;
        clip: rect(0, 1em, 1em, 0.5em);
    }

    &:hover {
        cursor: default;
    }

    &:hover > span {
        .transform-scale(1.3);
        color: @default-bar-color;
    }

    &:hover:after {
        .transform-scale(1.1);
    }
}

.perclock {

    & > span {
        font-size: 0.175em;
    }
}
