////
/// @group components
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @requires {mixin} bem-block
/// @requires {mixin} bem-elem
/// @requires {mixin} bem-mod
////

/// Slider
@include b(igx-slider) {
    $this: bem--selector-to-string(&);
    @include register-component(str-slice($this, 2, -1));

    $thumbs: 'from' 'to';
    @extend %igx-slider-display !optional;

    @include e(track) {
        @extend %igx-slider-track !optional;
    }

    @include e(track-fill) {
        @extend %igx-slider-track-fill !optional;
    }

    @include e(ticks) {
        @extend %igx-slider__ticks !optional;
    }

    @include e(ticks, $m: tall) {
        @extend %igx-slider__ticks--tall !optional;
    }

    @include e(ticks, $m: top) {
        @extend %igx-slider__ticks--top !optional;
    }

    @include e(tick-label, $m: hidden) {
        @extend %igx-slider__tick-label--hidden !optional;
    }

    @include e(tick-labels, $m: top-bottom) {
        @extend %igx-slider__tick-labels--top-bottom !optional;
    }

    @include e(tick-labels, $m: bottom-top) {
        @extend %igx-slider__tick-labels--bottom-top !optional;
    }

    @include e(ticks-group) {
        @extend %igx-slider__ticks-group !optional;
    }

    @include e(ticks-group, $m: tall) {
        @extend %igx-slider__ticks-group--tall !optional;
    }

    @include e(ticks-tick) {
        @extend %igx-slider__ticks-tick !optional;
    }

    @include e(ticks-label) {
        @extend %igx-slider__ticks-label !optional;
    }

    @include e(thumbs) {
        @extend %igx-slider-thumbs-container !optional;
    }

    @each $t in $thumbs {
        @include e(thumb-#{$t}) {
            @extend %igx-thumb-display !optional;

            .dot {
                @extend %igx-thumb-dot !optional;
            }
        }

        @include e(thumb-#{$t}, $m: active) {
            @extend %igx-thumb--active !optional;

            .dot {
                @extend %igx-thumb-dot--active !optional;
            }
        }

        @include e(label-#{$t}) {
            @extend %igx-label-display !optional;

            .label {
                @extend %igx-thumb-label !optional;
            }
        }

        @include e(label-#{$t}, $m: active) {
            @extend %igx-thumb--active !optional;

            .label {
                @extend %igx-thumb-label--active !optional;
            }
        }
    }

    @include e(thumb, $m: hovered) {
        .dot {
            @extend %igx-thumb-dot--active !optional;
        }
    }

    @include e(thumb, $m: pressed) {
        .dot {
            @extend %igx-thumb-dot--pressed !optional;
        }
    }

    @include e(track-steps) {
        @extend %igx-slider-track-steps !optional;
    }

    @include m(disabled) {
        @extend %igx-slider-display !optional;

        @include e(track) {
            @extend %igx-slider-track !optional;
            @extend %igx-slider-track--disabled !optional;
        }

        @include e(track-steps) {
            @extend %igx-slider-track-steps--disabled !optional;
        }

        @include e(track-fill) {
            @extend %igx-slider-track-fill !optional;
            @extend %igx-slider-track-fill--disabled !optional;
        }

        @include e(ticks-tick) {
            @extend %igx-slider__tick--disabled !optional;
        }

        @include e(ticks-label) {
            @extend %igx-slider__ticks-labels--disabled !optional;
        }

        @each $t in $thumbs {
            @include e(thumb-#{$t}) {
                @extend %igx-thumb-display !optional;
                @extend %igx-thumb--disabled !optional;

                .dot {
                    @extend %igx-thumb-dot--disabled !optional;
                }
            }
        }
    }
}