const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--grey-400);\n  }\n  .item:active {\n    background-color: var(--grey-400);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) .item,\n  :host(:focus-visible) .item {\n    background-color: var(--grey-400);\n  }\n  :host(:active) .item {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n}";
export default styles;