//
// Component: Form Range
//
// ========================================================================


// Variables
// ========================================================================

@form-range-thumb-background:                   @global-background;

//
// New
//

@form-range-track-border-radius:                500px;

@form-range-thumb-border-width:                 @global-border-width;
@form-range-thumb-border:                       darken(@global-border, 10%);


// Component
// ========================================================================

.hook-form-range() {}


// Track
// ========================================================================

.hook-form-range-track() { border-radius: @form-range-track-border-radius; }

.hook-form-range-track-focus() {}


// Thumb
// ========================================================================

.hook-form-range-thumb() { border: @form-range-thumb-border-width solid @form-range-thumb-border; }


// Miscellaneous
// ========================================================================

.hook-form-range-misc() {}


// Inverse
// ========================================================================

@inverse-form-range-thumb-background:           darken(fadein(@inverse-global-color, 100%), 50%);

@inverse-form-range-thumb-border:               darken(fadein(@inverse-global-border, 100%), 10%);

.hook-inverse-form-range-track() {}
.hook-inverse-form-range-track-focus() {}
.hook-inverse-form-range-thumb() { border-color: @inverse-form-range-thumb-border; }