@mixin center-vertical {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@mixin vertical-align {
    align-items: center;
    display: flex;
}

@mixin horizontal-align {
    display: flex;
    justify-content: center;
}

@mixin divider($width: 2px) {
    position: relative;

    &::after {
        background-color: var(--divider);
        content: '';
        height: 70%;
        left: 0;
        position: absolute;
        top: calc(50% - 70% / 2);
        width: $width;
    }
}

/* stylelint-disable value-no-vendor-prefix */
@mixin line-clamp($clamp: 2) {
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: $clamp;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
/* stylelint-enable value-no-vendor-prefix */

@mixin truncated-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-inlineflex {
    display: inline-flex;
    vertical-align: top;
}

.textOverflowEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// Loading animation
$base-color: var(--gray-100);
$shine-color: rgb(234 234 234 / 60%);
$animation-duration: 2s;
$cubic-fast: cubic-bezier(0.1, 0.4, 0.4, 1);
$cubic-slow: cubic-bezier(0.9, 0, 0, 0);

@mixin background-gradient {
    background-image: linear-gradient(
        115deg,
        $base-color 0,
        $shine-color 2.857rem,
        $base-color 5.714rem
    );
    background-size: 46.429rem;
}

@mixin background-gradient-wide {
    background-image: linear-gradient(
        115deg,
        $base-color 0,
        $shine-color 2.857rem,
        $base-color 5.714rem
    );
    background-size: 214.286rem;
}

@mixin block-shadow {
    box-shadow: 0 0 5px 1px rgb(0 15 23 / 10%);
}

@keyframes animated-bars {
    0% {
        background-position: -7.143rem;
    }

    40%,
    100% {
        background-position: 20rem;
    }
}

@keyframes animated-bars-wide {
    0% {
        background-position: -7.857rem;
    }

    100% {
        background-position: 170rem;
    }
}

%bs-col-styles {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@mixin col-x-list {
    @for $i from 15 through 100 {
        @if $i % 5 == 0 {
            $width-percent: unquote($i + '%');
            .col-#{$i} {
                flex: 1 1 $width-percent;
                max-width: $width-percent;

                @extend %bs-col-styles;
            }
        }
    }
}

@include col-x-list;

@mixin font-size-x-px {
    @for $i from 8 through 24 {
        $size-str: unquote($i + 'px');
        .font-size-#{$i}px {
            font-size: $size-str;
        }
    }
}

@include font-size-x-px;