// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

@b3: #b3b3b3;

//
//  Default appearance styles
//  _____________________________________________

[data-content-type='slider'],
.pagebuilder-content-type.pagebuilder-slider {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    border: none;
    transition: none;

    .slick-list,
    .slick-track,
    .slick-slide {
        min-height: inherit;

        > div {
            min-height: inherit;
            width: 100%;

            .pagebuilder-content-type-wrapper {
                min-height: inherit;
            }
        }
    }

    .slider-container {
        .pagebuilder-system-border;
        border-style: none;

        .slider-small-width {
            .pagebuilder-image-uploader-container {
                .pagebuilder-options {
                    display: none;
                }
            }
        }
    }

    &.pagebuilder-content-type-active {
        .slick-active .pagebuilder-options {
            &:extend(.pagebuilder-options-visible all);
        }

        &:hover {
            -moz-transition: none;
            -o-transition: none;
            -webkit-transition: none;
            box-shadow: none;
            transition: none;

            .slider-container {
                .pagebuilder-system-border-hover;
            }
        }
    }

    .slider-empty {
        align-items: flex-end;
        color: @color-gray65-lighten;
        display: flex;
        font-size: 20px;
        font-weight: lighter;
        height: 37%;
        justify-content: center;
        position: absolute;
        width: 96%;
    }

    .slider-controls {
        padding: 10px 0;
        text-align: center;

        .slider-navigation {
            display: inline-block;
            line-height: 33px;
            padding: 0 8px;
            position: relative;
            text-align: center;
            vertical-align: middle;

            .navigation-dot {
                display: inline-block;
                font-size: 12px;
                height: 36px;
                margin: 0;
                text-align: center;
                vertical-align: top;
                width: 36px;

                .lib-tooltip(
                    @_tooltip-position: top,
                    @_tooltip-color: @color-gray80
                );

                .tooltip-content {
                    background: @color-lazy-sun;
                    border: 1px solid @color-dark-grayish-orange;
                    border-radius: 1px;
                    bottom: 97.5%;
                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
                    color: @color-pagebuilder-darkest-gray;
                    font-size: 14px;
                    left: 50%;
                    min-width: auto;
                    padding: .9rem 1.8rem;
                    position: absolute;
                    text-align: center;
                    transform: translateX(-50%);
                    white-space: nowrap;

                    &:before,
                    &:after {
                        border: .8rem solid transparent;
                        content: '';
                        display: block;
                        height: 0;
                        left: 50%;
                        margin-left: -.8rem;
                        position: absolute;
                        top: 100%;
                        width: 0;
                    }
                    &:before {
                        border-top-color: @color-dark-grayish-orange;
                        margin-top: 1px;
                        z-index: 3;
                    }
                    &:after {
                        border-top-color: @color-lazy-sun;
                        z-index: 4;
                    }
                }

                .navigation-dot-anchor {
                    display: block;
                    height: 100%;
                    position: relative;
                    transition: all .3s;
                    width: 100%;

                    &:active {
                        cursor: grabbing;
                        cursor: -moz-grabbing;
                        cursor: -webkit-grabbing;
                    }

                    &:after {
                        background: @color-white;
                        border: 1px solid @color-gray80;
                        border-radius: 10px;
                        content: ' ';
                        display: inline-block;
                        height: 12px;
                        left: 50%;
                        position: absolute;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        transition: all .3s;
                        width: 12px;
                    }

                    &:before {
                        .abs-icon;
                        bottom: 0;
                        color: @color-dark-gray0;
                        content: @icon-gripper__content;
                        cursor: move; /* fallback if grab cursor is unsupported */
                        cursor: grab;
                        cursor: -moz-grab;
                        cursor: -webkit-grab;
                        display: block;
                        font-size: 12px;
                        left: 50%;
                        opacity: 0;
                        position: absolute;
                        transform: rotate(90deg) translateY(50%);
                        transition: all .3s;
                    }

                    &:active:before {
                        cursor: grabbing;
                        cursor: -moz-grabbing;
                        cursor: -webkit-grabbing;
                    }
                }

                .pagebuilder-options {
                    visibility: visible;
                    z-index: -1;
                }

                &.ui-sortable-helper .navigation-dot-anchor {
                    opacity: .65;
                }

                &.sortable-placeholder {
                    &:after {
                        background-color: @color-very-dark-grayish-orange;
                        border: none;
                        border-radius: 10px;
                        content: ' ';
                        display: inline-block;
                        height: 12px;
                        left: 50%;
                        opacity: .15;
                        position: absolute;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        transition: all .3s;
                        width: 12px;
                    }
                }

                &.active {
                    .navigation-dot-anchor:after {
                        background: @color-very-dark-grayish-orange;
                        transition: all .3s;
                    }

                    .pagebuilder-options {
                        z-index: auto;
                    }
                }

                &.focus {
                    outline: 1px solid @color-blue-pure;

                    .pagebuilder-options {
                        .pagebuilder-options-visible;
                        z-index: 30;
                    }

                    .tooltip-content {
                        display: none;
                    }

                    .navigation-dot-anchor:before {
                        opacity: 1;
                        transition: all .3s;
                    }
                }

                &:hover {
                    .navigation-dot-anchor {
                        text-decoration: none;
                    }

                    .navigation-dot-anchor:after {
                        border: 1px solid @color-gray75;
                    }

                    &.active .navigation-dot-anchor:after {
                        background: @color-pagebuilder-darkest-gray;
                    }
                }
            }
        }

        .add-slide {
            display: inline-block;
            opacity: 0;
            transition: all .3s;
            vertical-align: top;
            visibility: hidden;

            &:before {
                content: @icon-plus__content;
                font-family: @icons-admin__font-name;
                font-style: normal;
                font-weight: normal;
                line-height: 1;
                padding-right: 5px;
                speak: none;
            }
        }
    }


    &:hover {
        .slider-controls {
            .add-slide {
                opacity: 1;
                transition: all .3s;
                visibility: visible;
            }
        }
    }

    &.children-min-height {
        .element-children {
            min-height: inherit;
            padding: 0;
        }
    }
}

//
//  Don't show tooltip when interacting
//  ______________________________________

.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-slider .slider-controls .navigation-dot .tooltip-content {
    display: none;
}

.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-slider.pagebuilder-content-type-active:hover .slider-container {
    box-shadow: 0 0 0 1px rgba(153, 153, 153, 0);
    z-index: 10;

    &.type-container {
        box-shadow: 0 0 0 1px rgba(153, 153, 153, .3);
    }
}

.pagebuilder-content-type-wrapper:hover .pagebuilder-content-type.pagebuilder-slider .slider-controls .add-slide {
    opacity: 1;
    transition: all .3s;
    visibility: visible;
}

.pagebuilder-content-type-hidden .pagebuilder-content-type.pagebuilder-slider.pagebuilder-content-type-active:hover .slider-container {
    z-index: 10;
}

[data-content-type='slider'] {
    .slick-track .slick-slide {
        display: block;
    }
    .slick-dots {
        display: block;
        list-style: none;
        margin: 0;
        padding: 15px 0;
        text-align: center;
        width: 100%;
        li {
            cursor: pointer;
            display: inline-block;
            height: 14px;
            margin: 0 5px;
            padding: 0;
            position: relative;
            vertical-align: middle;
            width: 14px;
            button {
                background: @color-white;
                border: 1px solid @color-gray;
                border-radius: 10px;
                box-shadow: none;
                cursor: pointer;
                display: block;
                height: 14px;
                padding: 0;
                text-indent: -99999px;
                transition: .3s;
                width: 14px;

                &:hover {
                    border: 1px solid @b3;
                }

                &:active,
                &:focus,
                &:not(.primary) {
                    box-shadow: none;
                }
            }

            &.slick-active {
                button {
                    background: @color-pagebuilder-darkest-gray;
                }
            }
        }
    }
}
