abbr, abbr {

text-decoration: none;
font-weight: inherit;
line-height: inherit;
font-size: inherit;

}

li, p {

abbr,
abbr[title] {
    text-decoration: none;
    border-bottom: 0.25rem dotted $background-middle;
    font-size: inherit;
}

}

a > abbr, a > abbr {

text-decoration: inherit;
border-bottom: inherit;

}

abbr:hover, abbr:focus, abbr:active, abbr:hover, abbr:focus, abbr:active {

color: $primary-color;

}

@media only screen and (max-width: 450px), (max-height: 450px) {

abbr[title] {
    position: relative;
    /* ensure consistent styling across browsers */
    text-decoration: inherit;
    border-bottom: none;
    font-size: inherit;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: -2.5em;
    width: auto;
    white-space: nowrap;

    /* style tooltip */
    background-color: $primary-color;
    color: $text-light;
    border-radius: $border-radius;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    font-size: 1.2rem;
    padding: 0.25rem 0.75rem;
}

}