@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;
}

.width100 {
    width: 100%;
}

// 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;
}

@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;
    }
}