// Bordered focus accessibility visual (default: buttons, input fields, etc.)
@mixin eui-accessible-focus() {
    border-color: v(eui-base-color-accessible-focus) !important;    // Must
    box-shadow: inset 0 0 0 1px v(eui-base-color-accessible-focus), inset 0 0 0 2px v(eui-base-color-grey-5);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
// Outlined focus accessibility visual (checkboxes, radios)
@mixin eui-accessible-focus-outline($offset: -2px, $outline-size: 2px) {
    outline: $outline-size solid v(eui-base-color-accessible-focus);
    outline-offset: $offset;
    -moz-outline-radius: v(eui-base-border-radius);
    transition: outline 0.15s ease-in-out, border 0.15s ease-in-out;
}
@mixin eui-accessible-focus-border-inline($display: '', $zIndex: auto) {
    @if $display != '' {
        display: $display;
    }
    z-index: $zIndex;
    @include eui-accessible-focus();
}
// This is the main mixin to call/include
@mixin eui-accessible-focus-border($display: '', $zIndex: auto, $inline: false) {
    @if $inline {
        @include eui-accessible-focus-border-inline($display, $zIndex);
    }
    @else {
        &:active:not([readonly]),
        &:focus:not([readonly]) {
            @include eui-accessible-focus-border-inline($display, $zIndex);
        }
    }
}
@mixin eui-accessible-focus-border-rounded() {
    border: 2px solid v(eui-base-color-accessible-focus);
    outline: none;
    transition: border 0.15s ease-in-out;
}
