@import '../../../node_modules/creative-patterns/packages/components/t-text/src/t-text';

.#{$namespace}t-text {
    @include t-text(1.4rem, $base-font-family, $colorDoveGray, $colorDoveGray);

    &:hover,
    &:visited {
        text-decoration: none;
        color: $colorDoveGray;
    }

    &--look {
        &_light {
            line-height: 2.5rem;
        }

        &_success {
            color: $colorApple;

            &:hover {
                color: $colorApple;
            }
        }

        &_error {
            color: $colorCrimson;

            &:hover {
                color: $colorCrimson;
            }
        }

        &_link {
            color: $colorCeruleanBlue;

            &:hover {
                color: $colorCeruleanBlue;
            }
        }

        &_attention {
            font-weight: 700;
            color: $colorMineShaft;
        }

        &_label {
            text-transform: uppercase;
        }
    }

    &--size {
        &_200 {
            font-size: 1rem;
        }

        &_250 {
            font-size: 1.1rem;
        }

        &_300 {
            font-size: 1.2rem;
        }

        &_400 {
            font-size: 1.4rem;
        }
    }

    &--type {
        &_wide {
            width: 100%;
        }
    }

    &__span {
        color: $colorDoveGray;
        padding: 0 0.3rem;

        &:hover,
        &:visited {
            text-decoration: none;
            color: $colorDoveGray;
        }

        &--look {
            &_attention {
                font-weight: 700;
            }

            &_link {
                color: $colorCeruleanBlue;
                font-weight: 300;
            }
        }
    }
}