// // Boxes // //

%bordered {

@include border-radius;
@include transition;
background-color: transparent;
border: $border-width solid $border-color;

}

%bordered-text-whiteed {

background: transparent;
border-color: $text-white-border;

}

%boxed {

@include border-radius;
@include shadow;
background-color: $white;

}

%floating {

-webkit-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
   -moz-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
                box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);

}

class*=“boxed”

{ @extend %boxed; }

class*=“bordered”

{ @extend %bordered; }

class*=“floating”

{ @extend %floating; }

class*=“rounded”

{

       border-radius: 10rem!important;
       &.blk_syst{
               border-radius: 0rem!important;
       }
}

// Hovers %scaling {

@include transition;

&:hover {
        @include scale;
        @include shadow;
        position: relative;
        z-index: 50;
}

}

%rising {

@include transition();

&:hover {
        @include translate(0,-10px);
        position: relative;
        z-index: 50;
        -webkit-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
           -moz-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
                        box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
}

}

@include media-breakpoint-up(md) {

[class*="scaling"] {
        @include transition();

        &:hover {
                @include scale;
                @include shadow;
                position: relative;
                z-index: 50;
        }
}

[class*="rising"] {
        @include transition();

        &:hover {
                @include translate(0,-10px);
                position: relative;
                z-index: 50;
                -webkit-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
                   -moz-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
                                box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1);
        }
}

}

// // separated items // .separated {

overflow: hidden;

> * {
        @include prefix(box-shadow, -1px -1px 0px 0px $border-color, webkit moz);

        &:not(:last-child) {
                margin-bottom: 0!important;
        }
}

}

.text-white {

.separated {
        > * {
                @include prefix(box-shadow, -1px -1px 0px 0px $text-white-border, webkit moz);
        }
}

}

// Equal // // equalise width and height of a box %equal {

position: relative;
// overflow: hidden;

&::before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 100%;
}

> * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}

&[class*="-short"] {
        &::before {
                padding-top: 75%;
        }
}

&[class*="-long"] {
        &::before {
                padding-top: 125%;
        }
}

}

.equal {

@extend %equal;

.equal-header,
.equal-footer {
        position: absolute;
        right: 0;
        left: 0;
        padding: 30px;
}

.equal-header { top: 0; }
.equal-footer { bottom: 0; }

.row {
        height: 100%;
}

}