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

.text-nowrap {
    white-space: nowrap;
}
//
// S T Y L E S
//

.typo-body2 {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
}

.typo-body1 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.typo-caption {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.66;
}

.typo-button {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.75;
}

.typo-h1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.167;
}

.typo-h2 {
    font-size: 3.75rem;
    font-weight: 300;
    line-height: 1.2;
}

.typo-h3 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.167;
}

.typo-h4 {
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1.235;
}

.typo-h5 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.334;
}

.typo-h6 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

.typo-subtitle1 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
}

.typo-subtitle2 {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.57;
}

.typo-paragraph {
    margin-bottom: 16px;
}

.typo-noWrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-link {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

@mixin typoTheme($palette) {
    $text: map-get($palette, text, main);
    $text-primary: map-get($palette, text, primary);
    $text-secondary: map-get($palette, text, secondary);
    $bg: map-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);
    $primary-text: map-get($primary-palette, text);

    $secondary-palette: map-get($palette, secondary);
    $secondary: map-get($secondary-palette, main);
    $secondary-text: map-get($secondary-palette, text);

    color: $text-primary;
    background-color: $bg;

    .text-inherit {
        color: inherit !important;
    }

    .bg-inherit {
        background-color: inherit !important;
    }

    .text-bg {
        color: $bg !important;
    }

    .text-primary-text {
        color: $text-primary !important;
    }

    .text-secondary-text {
        color: $text-secondary !important;
    }

    .bg-text {
        background-color: $text !important;
    }

    .bg-default {
        background-color: $bg !important;
    }

    .text-primary {
        color: $primary !important;
    }

    .bg-primary {
        background-color: $primary !important;
    }

    .text-secondary {
        color: $secondary !important;
    }

    .bg-secondary {
        background-color: $secondary !important;
    }

    .text-link {
        color: $primary;
    }

    // shade scales
    .text-shade-10 {
        color: mix($bg, $text, 10%);
    }
    .text-shade-20 {
        color: mix($bg, $text, 20%);
    }
    .text-shade-30 {
        color: mix($bg, $text, 30%) !important;
    }
    .text-shade-40 {
        color: mix($bg, $text, 40%) !important;
    }
    .text-shade-50 {
        color: mix($bg, $text, 50%) !important;
    }
    .text-shade-60 {
        color: mix($bg, $text, 60%) !important;
    }
    .text-shade-70 {
        color: mix($bg, $text, 70%) !important;
    }
    .text-shade-80 {
        color: mix($bg, $text, 80%) !important;
    }
    .text-shade-90 {
        color: mix($bg, $text, 90%);
    }

    //
    .bg-gray-1 {
        background-color: mix($text, $bg, 1%);
    }
    .bg-gray-2 {
        background-color: mix($text, $bg, 2%);
    }
    .bg-gray-3 {
        background-color: mix($text, $bg, 3%);
    }
    .bg-gray-4 {
        background-color: mix($text, $bg, 4%);
    }
    .bg-gray-5 {
        background-color: mix($text, $bg, 5%);
    }
    .bg-gray-10 {
        background-color: mix($text, $bg, 10%);
    }
    .bg-gray-20 {
        background-color: mix($text, $bg, 20%);
    }
    .bg-gray-30 {
        background-color: mix($text, $bg, 30%);
    }
    .bg-gray-40 {
        background-color: mix($text, $bg, 40%);
    }
    .bg-gray-50 {
        background-color: mix($text, $bg, 50%) !important;
    }
    .bg-gray-60 {
        background-color: mix($text, $bg, 60%) !important;
    }
    .bg-gray-70 {
        background-color: mix($text, $bg, 70%) !important;
    }
    .bg-gray-80 {
        background-color: mix($text, $bg, 80%) !important;
    }
    .bg-gray-90 {
        background-color: mix($text, $bg, 90%) !important;
    }
    .bg-gray-95 {
        background-color: mix($text, $bg, 95%) !important;
    }

    //
    .bg-shade-1 {
        background-color: rgba($text, 1%);
    }
    .bg-shade-2 {
        background-color: rgba($text, 2%);
    }
    .bg-shade-3 {
        background-color: rgba($text, 3%);
    }
    .bg-shade-4 {
        background-color: rgba($text, 4%);
    }
    .bg-shade-5 {
        background-color: rgba($text, 5%);
    }
    .bg-shade-10 {
        background-color: rgba($text, 10%);
    }
    .bg-shade-20 {
        background-color: rgba($text, 20%);
    }
    .bg-shade-30 {
        background-color: rgba($text, 30%);
    }
    .bg-shade-40 {
        background-color: rgba($text, 40%);
    }
    .bg-shade-50 {
        background-color: rgba($text, 50%) !important;
    }
    .bg-shade-60 {
        background-color: rgba($text, 60%) !important;
    }
    .bg-shade-70 {
        background-color: rgba($text, 70%) !important;
    }
    .bg-shade-80 {
        background-color: rgba($text, 80%) !important;
    }
    .bg-shade-90 {
        background-color: rgba($text, 90%) !important;
    }
    .bg-shade-95 {
        background-color: rgba($text, 95%) !important;
    }

    //
    .hover-shade-1:hover {
        background-color: mix($text, $bg, 1%) !important;
    }
    .hover-shade-2:hover {
        background-color: mix($text, $bg, 2%) !important;
    }
    .hover-shade-3:hover {
        background-color: mix($text, $bg, 3%) !important;
    }
    .hover-shade-4:hover {
        background-color: mix($text, $bg, 4%) !important;
    }
    .hover-shade-5:hover {
        background-color: mix($text, $bg, 5%) !important;
    }
    .hover-shade-10:hover {
        background-color: mix($text, $bg, 10%) !important;
    }
    .hover-shade-20:hover {
        background-color: mix($text, $bg, 20%) !important;
    }
    .hover-shade-30:hover {
        background-color: mix($text, $bg, 30%) !important;
    }
    .hover-shade-40:hover {
        background-color: mix($text, $bg, 40%) !important;
    }
    .hover-shade-50:hover {
        background-color: mix($text, $bg, 50%) !important;
    }
    .hover-shade-60:hover {
        background-color: mix($text, $bg, 60%) !important;
    }
    .hover-shade-70:hover {
        background-color: mix($text, $bg, 70%) !important;
    }
    .hover-shade-80:hover {
        background-color: mix($text, $bg, 80%) !important;
    }
    .hover-shade-90:hover {
        background-color: mix($text, $bg, 90%) !important;
    }
    .hover-shade-95:hover {
        background-color: mix($text, $bg, 95%) !important;
    }
}

.theme-bd.theme-light {
    @include typoTheme(map-get($theme, light));
}

.theme-bd.theme-dark {
    @include typoTheme(map-get($theme, dark));
}