%shine-effect {
    overflow: hidden;
    position: relative;

    &::before {
        position: absolute;
        top: 0;
        left: -85%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
        transition: 0.5s ease-in-out;
         }

        &:hover::before {
            -webkit-animation: shine .75s;
            animation: shine .75s;
         }
}


%flex-with-wrap {
    display: flex;
    flex-wrap: wrap;
}

%x-center {
    @extend %flex-with-wrap;
    align-items: center;
}

%y-center {
    @extend %flex-with-wrap;
    justify-content: center;
}

%xy-center {
    @extend %flex-with-wrap;
    align-items: center;
    justify-content: center
}

.scroll-style {
    @media (min-width: 991px) {
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }

        &::-webkit-scrollbar-thumb {
            background-color: darken($primary,10%);
            outline: 1px solid slategrey;
        }
    }
}

.d__block {
    display: block;
}

.d__none {
    display: none;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.align-items-center {
    @extend .flex;
    align-items: center;
}

.justify-content-center {
    @extend .flex;
    justify-content: center;
}

.flex-center {
    @extend .flex;
    @extend .align-items-center;
    @extend .justify-content-center;
}

%leaf-bg {
    background: $primary;
    color: $theme-text-color !important;
    padding: 0 10px;
    border-radius: 10px 0px;
}