const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\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 */\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  :host {\n    display: contents;\n  }\n  :host([open]) dialog {\n    box-sizing: border-box;\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n  :host > div:not([hidden]) {\n    display: contents;\n  }\n  header {\n    display: flex;\n  }\n  header .close::part(_button) {\n    border-radius: 100%;\n    color: var(--text-primary-color);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--grey-500);\n  }\n  header h2 {\n    flex-grow: 1;\n    font-weight: 400;\n    line-height: 1.5;\n    margin: 0.25rem 0 0 0.75rem;\n  }\n  dialog {\n    --z-index: var(--sg-z-index-popover);\n    background-color: var(--sg-popover-background);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n    inset: auto;\n    z-index: var(--z-index);\n    box-shadow: var(--sg-popover-box-shadow);\n    color: var(--text-primary-color);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0;\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--text-primary-color);\n    --sg-border-color: var(--text-primary-color);\n    border-radius: var(--sg-border-radius);\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid var(--sg-border-width) var(--sg-border-color);\n      --border-color: var(--sg-border-color);\n      padding-bottom: 0.5rem;\n      border-radius: 1rem 1rem 0 0;\n      bottom: 0;\n      left: 0;\n      transition: all 300ms ease-in-out;\n      width: 100%;\n      border: 1px solid var(--border-color);\n      border-radius: 0.25rem;\n      max-height: 80svh;\n      padding-bottom: 0;\n      inset: 0;\n    }\n    dialog.use-modal-in-mobile.v-kb-visible {\n      inset-block-end: auto;\n      max-height: 50svh;\n      top: 1rem;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile header {\n      display: none;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {\n      opacity: 0;\n    }\n  }\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.2);\n    display: block;\n    position: fixed;\n  }\n  dialog:not(.use-modal-in-mobile) header {\n    display: none;\n  }\n  dialog:not(.use-modal-in-mobile)::backdrop {\n    opacity: 0;\n  }\n}";
export default styles;