@use "../theme_variables_common" as common;
@use "./typography";

.anchor {
    &.disabled {
        /* Make the disabled links grayish*/
        color: gray;
        /* And disable the pointer events */
        pointer-events: none;
    }

    &:focus-visible {
        outline: none;
        box-shadow : 0 0 0 2px var(--brand-l2-t40);
        &.inset {
            @include common.inset-outline;
        }
    }

}

b, strong {
    font-weight: unset;
    font-family: var(--font-family-bold);
}

.h2 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.h3 {
    margin-top: (common.$line-height-computed * 0.5);
    margin-bottom: (common.$line-height-computed * 0.25);
}

.label {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-base);
    color: var(--label-color);
    line-height: 1rem;

    &.disabled-input-label {
        color: var(--label-disabled-color);
        opacity: .4;
        cursor: default;
    }
}

svg-icon svg {
    .icon-with-fill {
        fill: var(--svg-std-icon-fill);
        stroke: none;
    }

    .icon-with-stroke {
        fill: none;
        stroke: var(--svg-std-icon-fill);
    }
}

svg-icon[data-escape-global-style] svg {
    .icon-with-fill {
        fill: unset;
        stroke: unset;
    }

    .icon-with-stroke {
        fill: unset;
        stroke: unset;
    }
}
