@atlassian/aui/src/less/aui-focus.less

@import (reference) './imports/aui-theme/core/colors';
@import (reference) './imports/aui-theme/core/borders';
@import (reference) './imports/mixins/focus';

// Only affect focusable elements inside a parent container with this class
// https://bitbucket.org/atlassian/aui/pull-requests/2872
.aui-browser-focus {
    // Get rid of the outline style on <button> and <input> elements in Firefox.
    // This doesn't have to be in our general mixin, since it only affects those two elements.
    // See http://wtfhtmlcss.com/#buttons-firefox-outline.
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
    }

    // Affect browser's focussed-element outline colour
    :focus {
        // NOTE: these are all separate because Legacy Edge does not respect the CSS var in the multivalued `outline` prop.
        outline-width: 2px;
        outline-style: solid;
        outline-color: @aui-focus-ring-color;
        outline-offset: 1px;
        // only affects Firefox, but... hey, maybe one day other browsers will support it, too!
        -moz-outline-radius: @aui-border-radius-small;
        outline-radius: @aui-border-radius-small;
    }
}

// Remove default focus styles for mouse users ONLY if
// :focus-visible is supported on this platform.
html:not(.aui-no-focusvisible) .aui-browser-focus :focus:not(:focus-visible) {
    outline: unset;
    outline-offset: unset;
}

// Affect the potential CSS standard pseudo-selector
html:not(.aui-no-focusvisible) .aui-browser-focus :focus-visible {
    #aui.with-focus-ring();
}