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

.#{$namespace}t-headline {
    @include t-headline(
        $colorMineShaft,
        $base-font-family,
        2.6rem,
        1.8rem,
        1.5rem,
        1.1rem,
        1rem,
        0.9rem
    );
    text-transform: uppercase;

    &--look {
        &_light {
            text-transform: none;
            font-weight: 700;
        }

        &_bordered {
            border-bottom: 1px solid $colorAlto;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
        }
    }

    &__span,
    &__count {
        font-weight: 400;
        margin-right: 0.5rem;
        color: $colorDoveGray;
    }

    &__span {
        &:after {
            margin-left: 0.5rem;
            content: '';
            display: inline-block;
            width: 0.2rem;
            height: 1.2rem;
            background: $colorAlto;
        }

        &:last-child {
            &:after {
                display: none;
            }
        }
    }

    &__count {
        &:before {
            content: '(';
        }

        &:after {
            content: ')';
        }
    }
}