// COLORES

$ter1: #676766;
$ter2: #8D8D8D;
$ter3: #F5F5F5;

// SOMBRAS
$sombra-box1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$sombra-box2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$sombra-box3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$sombra-box4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
$sombra-box5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

// TRANSICIONES
$tr-sombra: all 0.3s cubic-bezier(.25,.8,.25,1);
$tr-estandar: all 300ms ease;


// MIXINS

@mixin loader($size: 90px, $border:4px) {
    border-radius: 50%;
    border: $border solid #007BB1;
    border-top: $border solid #19A600;
    border-right: $border solid #19A600;
    width: $size !important;
    height: $size !important;
    min-height: $size !important;
    //-webkit-animation: spin 1.5s linear infinite; /* Safari */
    animation: spin 1.2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
    100% { transform: rotate(360deg); }
}

// ARTICULOS - CARRUSEL

div.carousel-articulos{
    
    div.flickity-viewport{
        transition: height 0.2s;
    }

    div.carousel-cell{
        min-height: 100%;
        display: flex;

        > a{
            width: 256px;
            margin: 0px 17px 35px 17px;
            padding-bottom: 25px; 
            background-color: $ter3;
            border-radius: 2px;
            box-shadow: $sombra-box1;
            transition: $tr-sombra;
            align-items: stretch;
            
            &:hover{
               box-shadow: $sombra-box4;
               text-decoration: none;
            }
            
            > img{
                border-radius: 2px 2px 0 0;   
            }

            > span:first-of-type{
                margin: 25px 15px 10px 15px;
                font-size: 1.9rem; 
                font-weight: 500;
                line-height: 1.1; 
                color: $ter1;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            
            > span:nth-of-type(2){
                display: block; 
                margin: 15px 15px 0px 15px; 
                font-size: 1.6rem; 
                line-height: 1.2; 
                font-weight: 400;
                color: $ter2;
                display: -webkit-box;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
        }
    }
    > div.placeholder{
        display: flex;
        overflow: hidden;
        margin-right: 1rem;

        > div.three.doubling.stackable.cards{
            margin: 0px 17px 0px 0px;
            
            > div.ui.card{
                width: 256px !important;

                div.rectangular.image{
                    height: 160px;
                    padding-top: 0;
                }
            }
        }
    }
}

// ARTÍCULOS - FLEXBOX
%flexbox-row-wrap{
    display: flex; 
    flex-flow: row wrap; 
}
%flexbox-row-wrap-stretch-evenly{
    @extend %flexbox-row-wrap;
    align-items: stretch; 
    align-content: stretch; 
    justify-content: space-evenly; 
}
div.flexbox-articulos{
    @extend %flexbox-row-wrap-stretch-evenly; 
    margin-bottom: 60px;

    // Spinner anterior al div.loader
    /*
    > i.icon{
        color: $sec1;
        margin-top: 40px;
    }*/

    > div.loader {
        @include loader( $border:4px );
        margin-top: 40px;
    }

    > article{
        min-width: 200px; 
        max-width: 256px; 
        margin: 30px 5px; 
        background-color: $ter3;
        border-radius: 2px;

        > a{
            display: block;
            text-decoration: none;
            padding-bottom: 20px; 
            border:none !important;
            background-color: $ter3;
            height: 100%;
            border-radius: 2px;
            //box-shadow: $sombra-box1;
            box-shadow: 0px -1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);;
            transition: $tr-sombra;

            &:hover{
               box-shadow: $sombra-box4;

               > span:first-of-type{
                color: black;
               }
            }
            
            > img{
                border-radius: 2px 2px 0 0;
                background-color: white;
            }

            > div.carga-tmp{
                width: 256px;
                text-align: center;
                height: 160px;
                vertical-align: middle;
            }

            > span:first-of-type{
                display: block; 
                margin: 10px 15px; 
                font-size: 1.9rem; 
                font-weight: 400;
                line-height: 1.15; 
                color: $ter1;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            
            > span:nth-of-type(2){
                display: block; 
                padding: 5px 15px 0px 15px; 
                font-size: 1rem; 
                line-height: 1; 
                font-weight: 400;
                color: $ter2;
            }
        }
    }
}