// Links styles a { color: var(--wp--style--color--link, var(--global--color-primary)); text-decoration-color: var(--global--color-secondary); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration 0.1s ease-out; &:hover, &:focus { text-decoration: none; } &:hover { color: var(--global--color-primary-hover); } &:focus { color: var(--global--color-secondary); } &:active { color: var(--wp--style--color--link, var(--global--color-primary)); } // If a custom link color has been assigned, // switch the color of the bottom border too. .has-link-color & { text-decoration-color: var(--wp--style--color--link, var(--global--color-primary)); &:hover, &:focus { text-decoration: none; } } .has-primary-background-color &:not(.has-link-color):not(.has-text-color) { color: var(--global--color-background); } } button, a { cursor: pointer; }