/* Used as page title */
h1 {
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: bold;
}

h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: bold;
}

h3 {
    font-size: 1.15rem;
    line-height: 1.65rem;
    font-weight: 600;
}

.animation-underline__from-centre, .animation-underline__from-sides {
    position: relative;

}
.animation-underline__from-centre::after,
.animation-underline__from-sides::before,
.animation-underline__from-sides::after
{
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    margin-top: 0.25rem;
    bottom: 0;
    transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
}
.animation-underline__from-centre::after {
    transition-duration: var(--default-transition-duration); /* 150ms */
    left: 50%;
}

.animation-underline__from-sides::after {
    left: 0.5rem;
    transition-duration: 250ms;
}
.animation-underline__from-sides::before {
    right: 0.5rem;
    transition-duration: 250ms;
}
.animation-underline__up {
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: var(--color-neutral-white);
    transition-delay: 250ms;
    transition-duration: 250ms;
}
.animation-underline__up-parent {
    padding: 0 0.5rem;
    z-index: 2;
    transition-timing-function: var(--default-transition-timing-function);
}

.animation-underline__up-parent:hover > .animation-underline__up {
    height: 100%;
    transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
}
.animation-underline__up-parent:not(:hover) > .animation-underline__up {
    transition-delay: 0ms;
}
.animation-underline__up-parent:has(.animation-underline__up):hover {
    color: var(--color-prim-default)
}

.animation-underline__from-centre:hover::after {
    width: 100%;
}
.animation-underline__from-sides:hover::before,
.animation-underline__from-sides:hover::after
{
    width: 51%;
}
.animation-underline__from-centre:hover::after {
    left: 0;
}
.animation-underline__from-sides:not(:hover)::after,
.animation-underline__from-sides:not(:hover)::before
{
    transition-delay: 150ms;
}

.animation-underline__theme--white::before,
.animation-underline__theme--white::after
{
    background-color: var(--color-neutral-white);
}
.animation-underline__theme--tint::before,
.animation-underline__theme--tint::after
{
    background-color: var(--color-prim-tint6);
}
