@import (reference) "~examples/faas-ui/less/ui.less";

.swipe, .swipe-items-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.swipe-items-wrap > img {
    position: absolute;
    transform: translateX(-100%);
    width: 100%;
    display: none
}
.swipe-items-wrap > img.is-active {
    display: block;
    transform: none;
}
.swipe-indicators {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.swipe-indicator {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    display: inline-block;
    border: @border-base;
    border-color: fade(@color-primary, 50%);
}
.swipe-indicator.is-active {
    background-color: @color-bg;
    border-color: @color-primary;
}
.swipe-button-container {
    display: block;
}
@media all and (max-device-width: 750px){
    .swipe-button-container {
        display: none;
    }
}
.swipe-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: fade(@color-base, 5%);
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    color: fade(@color-white, 50%);
    &:hover {
        background-color: fade(@color-base, 20%);
        color: @color-white;
    }
}
.swipe-pre-button {
    left: 16px;
}
.swipe-next-button {
    right: 16px;
}