.o-ui-link {
    outline: transparent;
    color: inherit;
    display: inline-block;
    border: none;
    background-color: var(--o-ui-transparent);
    padding: 0;
    position: relative;
    /* direct text is responsible of setting the text decoration style */
    text-decoration: none;
}

/* Set direct child border-radius */
.o-ui-link > * {
    border-radius: inherit;
}

/* INHERIT | STATE | HOVER */
/* .o-ui-link-inherit-color:hover,
.o-ui-link-inherit-color-hover {
    color: inherit;
} */

/* STATE | FOCUS */
.o-ui-link:focus-visible,
.o-ui-link-focus {
    box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default);
}

/* STATES | FOCUS | FOCUS RING */
.o-ui-text-link:after {
    opacity: 0;
    content: "";
    top: calc(-1 * var(--o-ui-focus-ring-outset-outer-offset));
    left: calc(-1 * var(--o-ui-focus-ring-outset-outer-offset));
    right: calc(-1 * var(--o-ui-focus-ring-outset-outer-offset));
    bottom: calc(-1 * var(--o-ui-focus-ring-outset-outer-offset));
    display: block;
    position: absolute;
    box-shadow: 0 0 0 2px var(--o-ui-focus-ring-color-alias-default);
    border-radius: var(--o-ui-br-2);
    transition: var(--o-ui-focus-ring-transition);
}

.o-ui-text-link:focus-visible:after,
.o-ui-text-link-focus:after {
    opacity: 1;
}

/* STATE | ACTIVE | FOCUS */
.o-ui-link:active.o-ui-link:focus-visible,
.o-ui-link-active.o-ui-link-focus,
.o-ui-link-active.o-ui-link:focus-visible,
.o-ui-link:active.o-ui-link-focus {
    background-color: var(--o-ui-transparent);
    box-shadow: none;
}

/* STATE | DISABLED */
.o-ui-link-disabled {
    opacity: var(--o-ui-disabled-opacity);
}

/* STATE | DISABLED | HOVER */
.o-ui-link-disabled:hover,
.o-ui-link-disabled.o-ui-link-hover {
    cursor: not-allowed;
}

/* STATE | DISABLED | FOCUS */
.o-ui-link-disabled:focus-visible,
.o-ui-link-disabled.o-ui-link-focus {
    background-color: var(--o-ui-transparent);
    box-shadow: none;
}

/* TEXT */
:where(.o-ui-text-link-sm) {
    font-size: 1rem;
}

:where(.o-ui-text-link-md) {
    font-size: 1.25rem;
}

.o-ui-text-link {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    /* Cannot set a max-content width because links will not wrap on multiple lines anymore */
    height: max-content;
    width: fit-content;
}

.o-ui-link-text {
    text-decoration-thickness: from-font;
}

/* TEXT | STATES */
/* TEXT | STATE | FOCUS */
.o-ui-text-link:focus-visible,
.o-ui-text-link.o-ui-link-focus {
    outline: transparent;
    border-radius: var(--o-ui-br-2);
}

.o-ui-text-link:focus-visible:after,
.o-ui-text-link.o-ui-link-focus:after {
    opacity: 0;
}

/* TEXT | STATE | HOVER */
.o-ui-link:hover .o-ui-link-text,
.o-ui-link-hover .o-ui-link-text {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* TEXT | STATE | FOCUS */
.o-ui-link:focus-visible .o-ui-link-text,
.o-ui-link-focus .o-ui-link-text {
    text-decoration: underline;
    text-decoration-style: solid;
}

/* TEXT | STATE | DISABLED | HOVER */
.o-ui-link-disabled:hover .o-ui-link-text,
.o-ui-link-disabled.o-ui-link-hover .o-ui-link-text {
    text-decoration: underline;
}

/* TEXT | STATE | DISABLED | FOCUS */
.o-ui-link-disabled:focus-visible .o-ui-link-text,
.o-ui-link-disabled.o-ui-link-focus .o-ui-link-text {
    text-decoration: underline;
}

/* TEXT | STATE | ACTIVE | FOCUS */
.o-ui-link:active.o-ui-link:focus-visible .o-ui-link-text,
.o-ui-link-active.o-ui-link-focus .o-ui-link-text,
.o-ui-link-active.o-ui-link:focus-visible .o-ui-link-text,
.o-ui-link:active.o-ui-link-focus .o-ui-link-text {
    text-decoration: underline;
}

/* TEXT | VARIATIONS */
/* TEXT | VARIATIONS | UNDERLINE | NONE */
.o-ui-link-no-underline {
    text-decoration: none;
}

/* TEXT | VARIATIONS | UNDERLINE | DOTTED */
.o-ui-link-dotted .o-ui-link-text {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: none;
    text-decoration-thickness: from-font;
    text-decoration-color: currentColor;
}

/* TEXT | VARIATIONS | UNDERLINE | SOLID */
.o-ui-link-solid .o-ui-link-text {
    text-decoration: underline;
    text-decoration-style: solid;
}

/* ICON */
.o-ui-text-link .o-ui-text-link-start-icon,
.o-ui-text-link .o-ui-text-link-end-icon {
    width: 1em;
    height: 1em;
}

.o-ui-text-link-start-icon,
.o-ui-text-link-end-icon {
    flex-shrink: 0;
    color: inherit;
}

/* LEFT ICON */
.o-ui-text-link-start-icon {
    margin-right: 0.25rem;
}

/* RIGHT ICON */
.o-ui-text-link-end-icon {
    margin-left: 0.25rem;
}

/* VARIATIONS */
/* ACCENT */
.o-ui-link-accent {
    color: var(--o-ui-text-alias-accent);
}

/* ACCENT | STATE | HOVER */
.o-ui-link:hover.o-ui-link-accent,
.o-ui-link-hover.o-ui-link-accent {
    color: var(--o-ui-text-alias-accent-hover);
}

/* NEGATIVE */
.o-ui-link-negative {
    color: var(--o-ui-text-alias-alert);
}

/* AS BUTTON */
button.o-ui-link {
    text-align: left;
}

/* AS BUTTON | HOVER */
button.o-ui-link:hover,
button.o-ui-link-hover {
    cursor: pointer;
}

/* INHERIT */
/* .o-ui-link-inherit {
    color: inherit;
} */

/* SHAPE | ROUNDED */
.o-ui-link-rounded {
    border-radius: var(--o-ui-br-4);
}

/* SHAPE | CIRCULAR */
.o-ui-link-circular {
    border-radius: var(--o-ui-br-circular);
}

.o-ui-link.o-ui-link-circular:after {
    border-radius: var(--o-ui-br-circular);
}

/* SHAPE | BOX */
.o-ui-link-box {
    border-radius: 0;
}

/* we need a .o-ui-icon-link-icon [sic] */
.o-ui-icon-link .o-ui-icon {
    display: block;
}

/* ICON LINK */
.o-ui-icon-link {
    border-radius: var(--o-ui-br-2);
}