/**
    This are helper classes for text/block styling across whole project
 */

.font-primary {
    font-family: var(--rocket-font-primary) !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-justify {
    text-align: justify;
}

.text-link {
    color: inherit;
    text-decoration: underline;

    @include event {
        text-decoration: none;
    }
}

.text-black {
    color: var(--rocket-color-black-base) !important;
}

.text-white {
    color: var(--rocket-color-white-base) !important;
}

.text-primary {
    color: var(--rocket-color-primary-200) !important;
}

.text-secondary {
    color: var(--rocket-color-secondary-100) !important;
}

.text-red {
    color: var(--rocket-color-red-100) !important;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lg {
    @extend %base-styles-text-lg;
}

.text-md {
    @extend %base-styles-text;
}

.text-sm {
    @extend %base-styles-text-sm;
}

.text-xs {
    @extend %base-styles-text-xs;
}

.text-muted {
    opacity: 0.8;
}

.text-help {
    @extend %base-styles-text-sm;

    color: var(--rocket-color-grey-600);
}

.text-error {
    @extend %base-styles-text-xs;

    color: var(--rocket-color-error-300)
}

.text-h1 {
    @extend %base-styles-h1;
}

.text-h2 {
    @extend %base-styles-h2;
}

.text-h3 {
    @extend %base-styles-h3;
}

.text-weight-400 {
    font-weight: 400;
}

.text-weight-500 {
    font-weight: 500;
}

.text-weight-600 {
    font-weight: 600;
}

.text-weight-700 {
    font-weight: 700;
}

.mt-3 {
    margin-top: 30px;
}

.mt-10 {
    margin-top: 100px;
}

.my-10 {
    margin-block: 100px;
}

.mw-930 {
    max-width: 930px;
}

.mw-1170 {
    max-width: 1170px;
}

.mx-auto {
    margin-inline: auto;
}

.w-full {
    width: 100%;
}

.sr-only {
    &[class] {
        @include a11y-hidden;
    }

    @each $size, $value in $rocket-breakpoints {
        &-#{$size} {
            &[class] {
                @include breakpoint($size) {
                    @include a11y-hidden;
                }
            }
        }
    }
}

.is-hidden {
    &[class] {
        display: none;
    }

    @each $size, $value in $rocket-breakpoints {
        &-#{$size} {
            &[class] {
                @include breakpoint($size) {
                    display: none;
                }
            }
        }
    }
}

.is-visible-block {
    &[class] {
        display: block;
    }

    @each $size, $value in $rocket-breakpoints {
        &-#{$size} {
            &[class] {
                @include breakpoint($size) {
                    display: block;
                }
            }
        }
    }
}

.is-visible-flex {
    &[class] {
        display: flex;
    }

    @each $size, $value in $rocket-breakpoints {
        &-#{$size} {
            &[class] {
                @include breakpoint($size) {
                    display: flex;
                }
            }
        }
    }
}

.skew-block-top {
   @include skew-block($directions: 'top');
}

.skew-block-bottom {
    @include skew-block($directions: 'bottom');
}

.skew-block-top-bottom {
    @include skew-block($directions: 'top-bottom');
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.animation-blink {
    animation: blink 2s linear infinite;
    animation-fill-mode: both;
}