
// h1 heading
.heading {
    font-size: $heading-lg-size;
    font-weight: bold;
    color: $color-heading;
    margin-bottom: 15px;

    :link,
    :visited {
        color: inherit;
        border-bottom: 1px dotted $color-text;

        &:hover {
            color: $color-blue-light;
            border-bottom-color: $color-blue-light;
            text-decoration: none;
        }
    }

    &--primary-link {
        :link,
        :visited {
            color: map-get($theme-colors, 'primary');
            border-bottom: 0;   
            text-decoration: underline;

            &:hover {
                color: $color-hover-2;
                text-decoration: underline;
            }
        }
    }

    &--xs {
        font-size: $heading-xs-size;
    }

    &--sm {
        font-size: $heading-sm-size;
    }

    &--md {
        font-size: $heading-md-size;
    }


    &--separator {
        @include separator;
    }


    &--centered {
        text-align: center;

        &.heading--separator {
            &::after {
                margin-left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
