:root {
    --reactist-text-link-idle-tint: var(--reactist-actionable-tertiary-idle-tint);
    --reactist-text-link-hover-tint: var(--reactist-actionable-tertiary-hover-tint);
    --reactist-text-link-idle-decoration: underline;
    --reactist-text-link-hover-decoration: underline;
}

.container {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    cursor: pointer;
}

.container svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: inherit;
    color: inherit;
    vertical-align: -0.125em;
    fill: currentColor;
    padding: 0 6px;
}

/* Color variants */
.default,
.default * {
    color: var(--reactist-text-link-idle-tint);
}

.default:hover,
.default:hover * {
    color: var(--reactist-text-link-hover-tint);
}

.inherit,
.inherit * {
    color: inherit;
}

.inherit:hover,
.inherit:hover * {
    color: var(--reactist-text-link-hover-tint);
}

/* Underline variants */
.underline,
.underline * {
    text-decoration: var(--reactist-text-link-idle-decoration);
}

.underline:hover,
.underline:hover * {
    text-decoration: var(--reactist-text-link-hover-decoration);
}

.no-underline,
.no-underline * {
    text-decoration: none;
}

.no-underline:hover,
.no-underline:hover * {
    text-decoration: var(--reactist-text-link-hover-decoration);
}
