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  .field {\n    border-radius: var(--sg-border-radius);\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--sg-border-color);\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field {\n    align-items: stretch;\n    gap: var(--gds-sys-space-xs);\n    background-color: var(--gds-sys-color-background-primary);\n    box-sizing: border-box;\n    color: var(--gds-sys-color-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n    min-block-size: 44px;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-sys-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-sys-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-sys-color-border-negative-01);\n    color: var(--gds-sys-color-content-negative-01);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-sys-color-l3-disabled-01);\n    color: var(--gds-sys-color-content-disabled-01);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-sys-space-l);\n  }\n}";
export default styles;