/**
 * @package         Sliders
 * @version         8.4.0
 * 
 * @author          Peter van Westen <info@regularlabs.com>
 * @link            https://regularlabs.com
 * @copyright       Copyright © 2023 Regular Labs All Rights Reserved
 * @license         GNU General Public License version 2 or later
 */
/*
 * You can override this stylesheet by creating your own in:
 * /templates/[YOUR TEMPLATE]/css/sliders/style.min.css
 */
@import "../../regularlabs/less/init.less";
@import "bootstrap.less";

.rl_sliders.accordion {
    .clearfix();

    margin-bottom: 1em;

    &:last-child {
        margin-bottom: 0;
    }

    > .accordion-group {
        .transition-duration(.2s);

        .panel-heading {
            padding: 0;
        }

        > .accordion-heading > a.accordion-toggle {
            .transition-duration(.2s);

            &:hover {
                background-color: @grayLighter;
                color:            @linkColorHover;
                text-decoration:  none;
            }

            span.rl_sliders-title-inactive {
                display: inherit;
            }

            span.rl_sliders-title-active {
                display: none;
            }
        }

        &.active > .accordion-heading > a.accordion-toggle {
            background-color: lighten(@grayLighter, 4%);
            color:            @linkColor;

            span.rl_sliders-title-inactive {
                display: none;
            }

            span.rl_sliders-title-active {
                display: inherit;
            }
        }

        > div > a:focus,
        &.active > div > a:focus {
            outline:            none;
            -webkit-box-shadow: inset 0 0 2px rgb(234, 176, 63);
            box-shadow:         inset 0 0 2px rgb(234, 176, 63);
        }

        > .accordion-body {
            > .accordion-inner {
                padding:    15px;
                overflow-y: hidden !important;
                overflow-x: auto;
                .clearfix();

                & > :first-child {
                    margin-top: 0;
                }

                & > :last-child {
                    margin-bottom: 0;
                }

                &[hidden] {
                    display: block;
                }

                .rl_sliders-title {
                    display: none;
                }
            }
        }

        &.active > .accordion-body > .accordion-inner {
            visibility: visible;
        }

        // Class: icon: adds plus/minus icons to the slider titles
        &.icon > .accordion-heading > a.accordion-toggle span.rl_sliders-toggle-inner:before {
            display:       inline-block;
            *margin-right: .3em;
            font-family:   'IcoMoon';
            font-style:    normal;
            speak:         none;
            content:       "\2a";
            // float: right; // Use to make the icons display on the right side
        }

        &.icon.active > .accordion-heading > a.accordion-toggle span.rl_sliders-toggle-inner:before {
            content: "\4b";
        }

        // Classes: Normal state + Hover state
        .sliderColor(@name, @color) {
            &.@{name} {
                // Normal state
                border-top:       5px solid #e5e5e5;
                border-top-color: lighten(@color, 20%);
                .border-radius(5px 5px 4px 4px);
                // Hover & Active state
                &:hover,
                &.active {
                    border-top-color: @color;
                }

                &.solid {
                    border-color: lighten(@color, 20%);

                    > .accordion-heading > a.accordion-toggle {
                        background-color: lighten(@color, 20%);
                        color:            #ffffff;

                        &:focus {
                            -webkit-box-shadow: none;
                            box-shadow:         none;
                        }
                    }

                    &.solid.color_content {
                        > .accordion-body > .accordion-inner {
                            background-color: lighten(@color, 50%);
                            border-color:     lighten(@color, 50%);
                            .border-radius(0 0 3px 3px);
                        }
                    }

                    &:hover,
                    &.active {
                        border-color: @color;
                    }
                }

                &:hover,
                &.active {
                    &.solid {
                        > .accordion-heading > a.accordion-toggle {
                            background-color: @color;
                        }
                    }
                }
            }
        }

        .sliderColors();

    }

    .rl_sliders-scroll {
        position:   relative;
        visibility: hidden;
        padding:    0;
    }
}

@media print {
    .rl_sliders {
        .rl_sliders-group {
            border: 0 !important;
        }

        .accordion-heading {
            display: none !important;
        }

        .accordion-body {
            display: block !important;
            opacity: 1 !important;
            height:  auto !important;
        }

        .rl_sliders-title {
            display: block !important;
        }

        .accordion-inner {
            border:  0 !important;
            padding: 0 !important;
        }
    }
}

.sliderColors() {
    // Style: blue
    .sliderColor(~'blue', @btnPrimaryBackground);
    .sliderColor(~'primary', @btnPrimaryBackground);

    // Style: info
    .sliderColor(~'info', @btnInfoBackgroundHighlight);

    // Style: green / success
    .sliderColor(~'green', @btnSuccessBackgroundHighlight);
    .sliderColor(~'success', @btnSuccessBackgroundHighlight);

    // Style: orange / warning
    .sliderColor(~'orange', @btnWarningBackgroundHighlight);
    .sliderColor(~'warning', @btnWarningBackgroundHighlight);

    // Style: red / danger
    .sliderColor(~'red', @btnDangerBackgroundHighlight);
    .sliderColor(~'danger', @btnDangerBackgroundHighlight);
    .sliderColor(~'error', @btnDangerBackgroundHighlight);

    // Style: grey / gray
    .sliderColor(~'grey', #808080);
    .sliderColor(~'gray', #808080);
}