/**
* DevExtreme (widgets/generic/gallery.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @GENERIC_GALLERY_INDICATOR_SIZE: 8px;
    @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE: 12px;
}

.dx-size-compact() {
    @GENERIC_GALLERY_INDICATOR_SIZE: 6px;
    @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE: 7px;
}

.dx-gallery {
    .dx-gallery-nav-button-prev,
    .dx-gallery-nav-button-next {
        position: absolute;
        top: 0;
        width: 34%;
        height: 100%;
        background: @gallery-navbutton-degradation-bg;
        background: transparent;
        cursor: pointer;

        &.dx-state-hover:after {
            background-color: @gallery-navbutton-hover-color;
        }

        &.dx-state-active:after {
            background-color: @gallery-navbutton-active-color;
        }

        .dx-icon-font-centered-sizing(32px);

        &:after {
            content: '';
            position: absolute;
            width: 32px;
            height: 100%;
            border-radius: @gallery-navbutton-border-radius;
        }

        &:before {
            position: absolute;
            z-index: 10;
            clear: both;
            font-size: 32px;
            color: @gallery-nav-arrow-color;
        }
    }

    .dx-gallery-nav-button-prev {
        .dx-icon-chevronleft;

        &:after {
            left: 0;
        }

        &:before {
            left: 0;
            right: auto;
            margin-left: 0;
        }
    }

    .dx-gallery-nav-button-next {
        .dx-icon-chevronright;

        &:after {
            right: 0;
        }

        &:before {
            right: 0;
            left: auto;
        }
    }
}


.dx-gallery-indicator {
    pointer-events: none;
    text-align: center;
}

.dx-gallery-indicator-item {
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid @gallery-indicator-item-border-color;
    pointer-events: auto;
    margin: 5px - @GENERIC_GALLERY_INDICATOR_SIZE/2 6px;
    width: @GENERIC_GALLERY_INDICATOR_SIZE;
    height: @GENERIC_GALLERY_INDICATOR_SIZE;
    background: @gallery-indicator-bg;
}

.dx-gallery-indicator-item-active,
.dx-gallery-indicator-item-selected {
    width: @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE;
    height: @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE;
    background: @gallery-indicator-item-selected-bg;
    border: 2px solid @gallery-indicator-selected-border-color;
    margin: 5px - @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE/2 6px;
}

.dx-state-focused.dx-gallery {
    .dx-gallery-indicator-item-selected {
        background: @gallery-indicator-focused-bg;
    }
}