.carousel when (@componentsJS-carousel) {
    position  : relative;
    max-width : 100%;
    .user-select();

    .carousel-clip {
        overflow : hidden;
        height   : 100%;
    }

    .carousel-wrap {
        .inline-block-wrap(top; ~'.carousel-item');
        min-width : 100%;
    }

    &:hover {
        .carousel-btn {
            display : block;
        }
    }

    .carousel-btn {
        .rgba(#fff; 75%);
        position  : absolute;
        bottom    : -50px;
        z-index   : 15;
        margin    : auto;
        font-size : 11px;

        &::before {
            display: block;
            font-family : @font-family-icons;
            font-size   : 3em;
            line-height : 1;
            position    : absolute;
            left        : 0;
            top         : 0;
            bottom      : 0;
            margin      : auto;
            text-align: center;
            padding: 9px;
            background: #fff;
            height: 50px;
            .border-radius(50%);
        }

        &.prev {
            right : 120px;

            &::before {
                content : "\e0c5";
            }
        }
        &.next {
            right : 45px;

            &::before {
                content : "\e0c6";
            }
        }

        &:hover {
            .rgba(#fff; 90%);
        }
    }
}
.carousel-news .carousel .carousel-btn {
    bottom: auto;
    top:30px;
}
