ITRadio/client/src/assets/css/mixins/text.scss

@define-mixin __p {
    position: relative;
    z-index: 2;
    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    &.m--mb-1 {
        margin-bottom: 1rem;
    }

    &.m--mb-2 {
        margin-bottom: 2rem;
    }

    &.m--mb-3 {
        margin-bottom: 3rem;
    }

    &.m--mb-4 {
        margin-bottom: 4rem;
    }

    &.m--mb-5 {
        margin-bottom: 5rem;
    }
}

@define-mixin h1 {
    @mixin __p;

    /*margin-top: 32px;*/
    margin-bottom: 1.5rem;
    font-size: 100px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-white);
    padding-bottom: 6px;
    @mixin responsive-l {
        font-size: 84px;
    }
    @mixin responsive-m {
        font-size: 48px;
    }
    @mixin responsive-s {
        font-size: 36px;
    }
}

@define-mixin h2 {
    @mixin __p;

    margin: 2.5rem 0;
    font-size: 3.375rem;
    line-height: 1.3;
    font-weight: 500;
    color: transparent;
    padding-bottom: 6px;
    background-clip: text;
    background-image: var(--linear-gradient);
    text-transform: uppercase;
    @mixin responsive-l {
        font-size:40px;
        line-height: 1.1;
    }
    @mixin responsive-m {
        font-size:32px;
    }
    /*@mixin responsive-s {
        font-size: 36px;
    }*/
    &.m--white {
        color: var(--color-white);
        margin: 1.5rem 0;
    }

    &.m--border {
        &:after {
            margin-top: 10px;
            content: '';
            display: block;
            background: url("./assets/img/icon/borderLine.svg");
            max-width: 260px;
            width: 100%;
            height: 10px;
        }
    }

    a {
        text-decoration: none;
        font-weight: 500;
        color: var(--color-white);
        transition: color 0.5s ease;

        &:hover {
            color: var(--color-white);
        }
    }
}

@define-mixin h3 {
    @mixin __p;

    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
}

@define-mixin h4 {
    @mixin __p;

    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
}

@define-mixin p {
    @mixin __p;
    margin-top: 8px;
    margin-bottom: 8px;
}

@define-mixin ul {
    @mixin p;

    list-style: none;
    padding: 0;

    li {
        padding-left: 15px;
        position: relative;
        margin-bottom: 16px;

        /* &:before {
             content: '';
             position: absolute;
             left: 0;
             width: 15px;
             height: 14px;
             top: 3px;
             background-size: contain;
             background-position: center;
             background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
             background-repeat: no-repeat;
         }*/
        &:before {
            content: '';
            position: absolute;
            left: 0;
            width: 5px;
            height: 5px;
            top: 7px;
            background: var(--color-white);
            border-radius: 50%;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    &.m--dots {
        li {
            padding-left: 1rem;

            &:before {
                content: '•';
                top: 0;
                height: auto;
                width: auto;
                background: none;
            }
        }
    }
}

@define-mixin ol {
    @mixin p;

    list-style: none;
    counter-reset: item;
    li {
        counter-increment: item;
        margin-bottom: 16px;
        vertical-align: middle;

        &:before {
            content: counter(item);
            padding-left: 12px;
            font-weight: 500;
            font-size: 18px;
            line-height: 24px;
            color: var(--color-white);
        }
    }
}

@define-mixin hr {
    @mixin p;
}

@define-mixin a {
    text-decoration: none;
    font-weight: 500;
    transition: all 0.5s ease;
    color: var(--color-white);
    position: relative;
    z-index: 2;
    &:hover {
        color: transparent;
        -webkit-background-clip: text;
        background-image: var(--linear-gradient);
        cursor: url("./assets/img/icon/cursor.svg"), auto;
        text-decoration: none;
    }

    &.m--link {
        display: flex;
        align-items: center;
        border-bottom: 1px solid transparent;

        &::after {
            margin-left: 10px;
            content: '';
            width: 20px;
            height: 20px;
            background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
            background-size: cover;
            transition: background 0.3s ease, width 0.3s ease;
        }

        &:hover {
            color: var(--color-white);
            border-bottom: 1px solid var(--color-white);
        }

        &:hover::after {
            width: 40px;
        }
    }

    &.m--underline {
        text-decoration: underline;
    }
}

@define-mixin a--color $color {
    color: $color;
    border-color: rgba($color, 0.5);
}

@define-mixin table {
    /* dummy */
}

@define-mixin base {
    font: $font-size-base/$line-height-base $font-family-base;
    color: $color-base;
}

@define-mixin format {
    h1:not(.nostyle) {
        @mixin h1;
    }

    h2:not(.nostyle) {
        @mixin h2;
    }

    h3:not(.nostyle) {
        @mixin h3;
    }

    h4:not(.nostyle) {
        @mixin h4;
    }

    p:not(.nostyle) {
        @mixin p;
    }

    ul:not(.nostyle) {
        @mixin ul;
    }

    ol:not(.nostyle) {
        @mixin ol;
    }

    hr:not(.nostyle) {
        @mixin hr;
    }

    a:not(.nostyle) {
        @mixin a;
    }

    table:not(.nostyle) {
        @mixin table;
    }

    b:not(.nostyle),
    strong:not(.nostyle) {
        font-weight: bold;
    }

    i:not(.nostyle),
    em:not(.nostyle) {
        font-style: italic;
    }

    u:not(.nostyle),
    ins:not(.nostyle) {
        text-decoration: underline;
    }

    strike:not(.nostyle),
    del:not(.nostyle) {
        text-decoration: line-through;
    }
}

@define-mixin text {
    @mixin format;

    font: $font-size-text/$line-height-text $font-family-text;
    color: $color-text;
}