$outline-offset: -2px;
$outline-size: 2px;

// Call this mixin to enforce the accessibility visuals when on focus/active
@mixin eui-accessible-focus($offset: $outline-offset, $size: $outline-size) {
    &:active:not([readonly]),
    &:focus:not([readonly]) {
        outline: $size solid v(eui-base-color-accessible-focus);
        outline-offset: $offset;
        transition: none;
    }

    // &:focus-visible:not([readonly]) {
    //     outline: $size solid v(eui-base-color-accessible-focus);
    //     outline-offset: $offset;
    //     transition: none;
    // }

    // Forced focusable element
    [tabindex="0"] {
        &:active:not([readonly]),
        &:focus:not([readonly]) {
            outline: $size solid v(eui-base-color-accessible-focus);
            outline-offset: $offset;
            transition: none;
        }
    }
}
