@helpscout/hsds-react/styles/mixins/focusRing.css.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.focusRing = exports.focusShadowWithInset = exports.focusShadow = void 0;

var _styledComponents = require("styled-components");

var _color = require("../../styles/utilities/color");

var focusShadow = "0 0 0 var(--focusRingSize, 2px) var(--focusRingColor, " + (0, _color.getColor)('blue.500') + ");";
exports.focusShadow = focusShadow;
var focusShadowWithInset = "\n  0 0 0 var(--focusRingSize, 2px) var(--focusRingColor, " + (0, _color.getColor)('blue.500') + "), inset 0 0 0 var(--focusRingSize, 2px) white;\n";
exports.focusShadowWithInset = focusShadowWithInset;
var focusRing = (0, _styledComponents.css)(["--focusRingColor:", ";--focusRingOffset:-2px;--focusRingShadow:", ";--focusRingRadius:inherit;outline:none;position:relative;&:before{content:'';border-radius:var(--focusRingRadius);bottom:var(--focusRingOffset);box-shadow:var(--focusRingShadow);left:var(--focusRingOffset);pointer-events:none;position:absolute;right:var(--focusRingOffset);top:var(--focusRingOffset);opacity:0;background:transparent;z-index:3;}&:focus,&.is-focused{&:before{opacity:1;}}&:focus:not(:focus-visible){&:before{opacity:0;}}&:focus-visible{&:before{opacity:1 !important;transition:opacity ease 0.2s;}}"], (0, _color.getColor)('blue.500'), focusShadow);
exports.focusRing = focusRing;