/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT License
 *
 * Slider.less
 *
 */

@slider-color: #c6c6c6;
@slider-color-disabled: #dbdbdb;
@slider-color-rest-state: #00828b;
@slider-color-hover-state: #219297;
@slider-color-active-state: #25bbc4;
@slider-color-disabled-state: #bababa;
@slider-marker-color: #000;
@slider-marker-color-disabled: #a0a0a0;

.slider {
    height: 12px;
    width: auto;
    position: relative;
    background-color: @slider-color;
    margin-bottom: 10px;

    .marker {
        height: 12px;
        width: 12px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background-color: @slider-marker-color;
        z-index: 3;
    }
    .complete {
        height: 100%;
        width: auto;
        background-color: @slider-color-rest-state;
        z-index: 2;
    }


    &.vertical {
        height: auto;
        width: 12px;

        .complete {
            position: absolute;
            height: auto;
            width: 12px;
            bottom: 0;
        }
    }

    &:hover {
        .complete {
            background-color: @slider-color-hover-state;
        }
    }

    &:active, &:active + .marker:active {
        .complete {
            background-color: @slider-color-active-state;
        }
    }
}