.o-ui-link {
    outline: none;
    display: inline-block;
    border: none;
    background-color: var(--o-ui-global-transparent);
    padding: 0;
    position: relative;
    color: inherit;
    /* 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);
}

/* 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);
    border-radius: var(--o-ui-shape-rounded);
    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-global-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-global-transparent);
    box-shadow: none;
}

/* TEXT */
.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: none;
    border-radius: var(--o-ui-shape-rounded);
}

.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-link-start-icon,
.o-ui-link-end-icon {
    flex-shrink: 0;
    color: inherit;
}

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

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

/* VARIATIONS */
/* PRIMARY */
.o-ui-link-primary {
    color: var(--o-ui-alias-text-primary-1);
}

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

/* PRIMARY | STATE | ACTIVE */
.o-ui-link:active.o-ui-link-primary,
.o-ui-link-active.o-ui-link-primary {
    color: var(--o-ui-alias-text-primary-1-active);
}

/* DANGER */
.o-ui-link-danger {
    color: var(--o-ui-alias-text-negative-1);
}

/* DANGER | STATE | HOVER */
.o-ui-link:hover.o-ui-link-danger,
.o-ui-link-hover.o-ui-link-danger {
    color: var(--o-ui-alias-text-negative-1-hover);
}

/* DANGER | STATE | ACTIVE */
.o-ui-link:active.o-ui-link-danger,
.o-ui-link-active.o-ui-link-danger {
    color: var(--o-ui-alias-text-negative-1-active);
}

/* SECONDARY */
.o-ui-link-secondary {
    color: var(--o-ui-alias-text-3);
}

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

/* SECONDARY | STATE | ACTIVE */
.o-ui-link:active.o-ui-link-secondary,
.o-ui-link-active.o-ui-link-secondary {
    color: var(--o-ui-alias-text-3-active);
}

/* 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-shape-rounded);
}

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

.o-ui-link.o-ui-link-circular:after {
    border-radius: var(--o-ui-shape-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-shape-rounded);
}