//main: "../stylesheet.scss"

.items {
    // VAR
    $m: $defaut-m;
    $m-m: $defaut-m;
    $ratio-b: 98%;
    $ratio-b-m: 80%;
    $border: 10px;
    // var
    
    @include flex( 0 1 auto );
    
    @include display(flex);
    @include flex-direction(row);
    @include flex-wrap(wrap);
    @include align-items(flex-start);
    @include justify-content(flex-start);
    
    max-height: 100%;
    padding: 0 #{$m/2};
    margin: 0; // margin: 0 -#{$m/2};
    
    overflow-y: auto;
    overflow-y: overlay;
    overflow-y: -webkit-overlay;
    
    @include media($tablet) {
        padding: 0 #{$m-m/2};
        margin: 0; // margin: 0 -#{$m-m/2};
    }
    
    
    .item {

        @include flex(0 1 auto);
        
        @include calc(width, 100% - #{$m});
        @include media-min( 641px ) { @include calc(width, #{(100%/2)} - #{$m-m}); }
        // @include media-min( 768px ) { @include calc(width, #{(100%/2)} - #{$m-m}); }
        @include media-min( 1025px ) { @include calc(width, #{(100%/3)} - #{$m}); }
        // @include media-min( 1281px ) { @include calc(width, #{(100%/4)} - #{$m}); }
        @include media-min( 1441px ) { @include calc(width, #{(100%/4)} - #{$m}); }
        // @include media-min( 1920px ) { @include calc(width, #{(100%/5)} - #{$m}); }
        @include media-min( 2221px ) { @include calc(width, #{(100%/6)} - #{$m}); }
        
        position:relative;
        margin: 0 #{$m/2} #{$m};
        @include media($tablet) { margin: 0 #{$m-m/2} #{$m-m/2}; }
        
        // POUR ANIMATION DES FILTRES
        // @include transform-style(preserve-3d);
        // @include transform( scale( 1 ) );
        // @include transition(transform 0.4s ease-out, width 0.4s ease-out);
        
        &[class*="hidden-by"],
        &.invisible {
            display: none !important;
            
            // POUR ANIMATION DES FILTRES
            // width: 0 !important;
            // margin: 0 !important;
            // @include transform( scale( 0 ) );
            // @include transition(transform 0.4s ease-in, width 0.4s ease-in);
        }
        
        > a { 
            margin-bottom:10px;
            @include border-radius(14px);
            width:100%;
            display: block;
            padding: 0 0 $ratio-b-m;
            
            @include media-min( 1025px ) {
                padding-bottom: $ratio-b;
            }
            
            img { width:100%; }
            .name { font-size:20px; font-weight:$extrabold; text-transform:none; margin-top:20px; }
            &.btn { font-size:20px; line-height: 25px; font-weight:$extrabold; color:#000; background:#efefef; box-shadow:0 $border #cfcecd; border:none;
                i { 
                    display: block; color:$text; margin-bottom: 5px; @include transition(color 0.3s);
                    
                    // FONT-SIZE par media
                    font-size: 125px;
                    @include media-min(641px) { font-size: 10vw; }
                    @include media-min(1281px) { font-size: 8vw; }
                    @include media-min(1600px) { font-size:125px; }
                    
                    &:only-child { margin-bottom: 0; }
                    
                }
                span { display:block; text-align:center; }
                &:hover { background:#d7d8d9; box-shadow:0 $border #9b9997;
                    i { color:#000; @include transition(color 0.3s); }
                }
                &:active { background:#9b9997; box-shadow:0 0px #cfcecd; top:$border; }
            }
            &.active {
                
                margin-bottom:0px; color:$primary; @include border-radius(14px);  background:#fff; border: $border solid $primary; box-shadow:none;
                
                @include calc( padding-bottom, #{$ratio-b-m} - $border);
                @include media-min( 1025px ) { @include calc( padding-bottom, #{$ratio-b} - $border); }
                
                i { color:$primary; @include transition(color 0.3s); }
                &:hover { background:#fff; box-shadow:none;
                    i { color:$primary; }
                }
                &:active { top:0px; box-shadow:none; }
            }

            .abs-content {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 90%;
                @include transform(translate(-50%, -50%));
                
                img { margin-left: auto; margin-right: auto; }
            }
        }
    }
}

.items {
    .item { background:#fff; box-sizing: border-box; }
}