/* @group @variables - link */

:root {
--link-color: var(--color-link);
--link-action-color: var(--color-link-action);
--link-active-color: var(--color-link-active);
--link-border-width: 0;
--link-border-style: solid;
--link-border-color: transparent;
}

/* @end @variables - link */

/* @group @variables */

a,
a:hover,
a:focus,
a:active {
font-weight: var(--link-font-weight);
font-variation-settings: var(--link-font-variation-settings);
}

a {
color: var(--link-color);
font-size: var(--link-font-size);
line-height: var(--link-line-height);
text-decoration: var(--link-text-decoration);
text-decoration-skip-ink: auto;
text-underline-position: under;
transition: var(--transition);
}

a:hover,
a:focus {
color: var(--link-action-color);
text-decoration: var(--link-action-text-decoration);
transition: var(--transition-action);
}

a:active {
color: var(--link-active-color);
text-decoration: var(--link-active-text-decoration);
}

/* @end @variables */

/* @group @variables */

a:not([class]) {
background-color: var(--link-background-color);
background-image: var(--link-background-image);
background-size: var(--link-background-size);
background-position: var(--link-background-position);
background-repeat: var(--link-background-repeat);
text-decoration-skip-ink: auto;
text-underline-position: under;
}

a:not([class]):hover,
a:not([class]):focus {
background-color: var(--link-action-background-color);
background-size: var(--link-action-background-size);
}

a:not([class]):active {
background-color: var(--link-active-background-color);
background-size: var(--link-active-background-size);
}

/* @end @variables */

/* @group @variables */

:where(main, [class*="o-mutual-footer"]) {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);

--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;

--transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s cubic-bezier(.6, .5, .5, .75);
}

/* @end @variables */

/* @group @variables */

:where([class*="o-mutual-footer"]) {
--link-color: var(--color-white);
--link-action-color: var(--color-white-action);
--link-active-color: var(--color-white-active);
}

/* @end @variables */