@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";



.one-ui-title {
    $root: &;
    font-family: $con-font;
    font-variant-ligatures: none;
    white-space: pre-line;
    display: inline-flex;
    text-align: inherit;
    color: inherit;
    width: 100%;

    @include font("bold",'s-14','l-1.4');

    @include setColor();
    @include setMargin();
    @include setFlex();
    @include setSize();

    @mixin titleSizes{
        &-xxs{
            @include font('s-12','l-1.4')
        }
        &-xs{
            @include font('s-14','l-1.4')
        }
        &-sm{
            @include font('s-16','l-1.4')
        }
        &-md{
            @include font('s-18','l-1.4')
        }
        &-lg{
            @include font('s-24','l-1.2');
            letter-spacing: -0.5px;
        }
        &-xl{
            @include font('s-32','l-1.2');
            letter-spacing: -1px;
            font-weight: 800;
        }
        &-xxl{
            @include font('s-40','l-1.2');
            letter-spacing: -1px;
            font-weight: 800;
        }
    }
    &--size {
        @include titleSizes();
    }
    &--sizeSm{
        @include media('','sm') {
            @include titleSizes();
        }
    }

    &--align {
        &-left {
            justify-content: flex-start;
            text-align: left;
        }
        &-center {
            justify-content: center;
            text-align: center;
        }
        &-right {
            justify-content: flex-end;
            text-align: right;
        }
    }

    &--weight {
        &-bold {
            @include font("bold");
        }

        &-regular {
            @include font("regular");
        }
    }


}