@mixin focused() {
    outline-width: var(--focus-ring-width);
    outline-style: var(--focus-ring-style);
    outline-color: var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring-shadow);
    transition:
        box-shadow var(--transition-duration),
        outline-color var(--transition-duration);
}

@mixin focused-inset() {
    outline-offset: -1px;
    box-shadow: inset var(--focus-ring-shadow);
}