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

$sizeNames: xs sm md lg xl xxl xxxl lx;
$sizes: 10 12 14 16 18 24 30 48;

@mixin descriptionSize($root, $size) {
  $i: index($sizes, $size);
  &-#{nth($sizeNames, $i)} {
    @include font(s-#{$size});
  }
}

.one-ui-description {
    $root: &;
    color: inherit;
    font-variant-ligatures: none;
    white-space: pre-line;
    line-height: 140%;
    //opacity: .9;
    height: auto;

    @include fontSetup();
    @include font('s-14');
    @include setColor();
    @include setMargin();
    @include setFlex();

    &--size {
        @each $size in $sizes {
          @include descriptionSize($root, $size);
        }
    }

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

        &-right {
            text-align: right;
        }

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

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

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

        &-medium {
            @include font("medium");
        }
        &-semi-bold {
            @include font("semi-bold");
        }
    }
    &--lineHeight {
        &-xs {
            @include font("l-1");
        }

        &-sm {
            @include font("l-1.2");
        }

        &-md {
            @include font("l-1.4");
        }
        &-lg {
            @include font("l-1.6");
        }
        &-xl {
            @include font("l-1.8");
        }
    }
    &--uppercase{
        text-transform: uppercase;
    }
    &--noWrap{
        white-space: nowrap;
    }
}