@import "../../../assets/scss/themes";
@import "../../../assets/scss/mixins";

.thumbnails-view{
    height: 100%;
    @include themify($themes) {
        background-color: themed('secondaryColorDark'); 
    }
    overflow: scroll;
    position: relative;
}
.change-page-container {
    padding: 10px;
    @include themify($themes) {
        background-color: themed('baseColorDark'); 
    }
    position: absolute;
    bottom: 0;
    width: 100%;
}
.page{
    display: none;
    padding: 0 20px;
}
.active {
    display: block;
}
.item-content{
    position: relative;
}
p.item-page-index {
    position: absolute;
    top: 70%;
    @include calc('width', '100% - 16px');
    text-align: center;
    @include themify($themes) {
        background-color: themed('baseColorLight'); 
        color: themed('secondaryColorDark')
    }
}
.item-content:hover p.item-page-index{
    @include themify($themes) {
        background: themed('secondaryColorDark');
        color: themed('baseColorLight')
    }
}
.pages-controller{
    width: 20px;
    @include themify($themes) {
        color: themed('baseColorLight')
    }
    margin: 5px;
    @include themify($themes) {
        border: 3px solid themed('baseColorLight');
    }
    border-radius: 3px;
}

.clicked-item{
    @include themify($themes) {
        border: 2px solid  themed('baseColorLight');
    }
}

.clicked-item-par{
    @include themify($themes) {
        background-color: themed('baseColorLight') !important;
        color: themed('secondaryColorDark');
    }
}
.current-page{
    @include themify($themes) {
        color: themed('baseColorLight');
    }
    display: inline;
    padding: 0 10px;
}