@shopify/polaris/build/esm/styles.css

Shopify’s admin product component library

@charset "UTF-8";
:root { --polaris-version-number: '10.4.1'; }

html, body { font-size: 0.9375rem; font-weight: var(--p-font-weight-regular); line-height: var(--p-font-line-height-2); text-transform: initial; letter-spacing: initial; font-weight: var(--p-font-weight-regular); color: var(--p-text); }

@media (min-width: 48em) { html, body { font-size: var(--p-font-size-100); } }

html, body, button { font-family: var(--p-font-family-sans); }

html { position: relative; font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; }

body { min-height: 100%; margin: 0; padding: 0; background-color: #f6f6f7; }

@media print { body { background-color: transparent !important; } }

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: 1em; font-weight: var(--p-font-weight-regular); }

button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; }


/* stylelint-disable scss/at-import-partial-extension-blacklist */
:root { color-scheme: light; --p-breakpoints-xs:0rem; --p-breakpoints-sm:30.625rem; --p-breakpoints-md:48rem; --p-breakpoints-lg:65rem; --p-breakpoints-xl:90rem; --p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-dark:rgba(32, 33, 35, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-neutral-subdued-dark:rgba(68, 71, 74, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-hovered-dark:rgba(47, 49, 51, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-pressed-dark:rgba(62, 64, 67, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-surface-search-field-dark:rgba(47, 49, 51, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-color-picker:rgba(0, 0, 0, 0.5); --p-shadow-color-picker-dragger:rgba(33, 43, 54, 0.32); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-on-dark:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-divider-dark:rgba(69, 71, 73, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-on-dark:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-on-dark:rgba(227, 229, 231, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-text-subdued-on-dark:rgba(153, 159, 164, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-on-dark:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-interactive-pressed-on-dark:rgba(136, 188, 255, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-hovered-dark:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-pressed-dark:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-icon-attention:rgba(138, 97, 22, 1); --p-surface-attention:rgba(255, 234, 138, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-shadow-transparent:0 0 0 0 transparent; --p-shadow-faint:0 0.0625rem 0 0 rgba(22, 29, 37, 0.05); --p-shadow-base:0 0 0 0.0625rem rgba(63, 63, 68, 0.05), 0 0.0625rem 0.1875rem 0 rgba(63, 63, 68, 0.15); --p-shadow-deep:0 0 0 0.0625rem rgba(6, 44, 82, 0.1), 0 0.125rem 1rem rgba(33, 43, 54, 0.08); --p-shadow-button:0 0.0625rem 0 rgba(0, 0, 0, 0.05); --p-shadow-top-bar:0 0.125rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.15); --p-shadow-card:0 0 0.3125rem rgba(23, 24, 24, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15); --p-shadow-popover:0 0.1875rem 0.375rem -0.1875rem rgba(23, 24, 24, 0.08), 0 0.5rem 1.25rem -0.25rem rgba(23, 24, 24, 0.12); --p-shadow-layer:0 1.9375rem 2.5625rem 0 rgba(32, 42, 53, 0.2), 0 0.125rem 1rem 0 rgba(32, 42, 54, 0.08); --p-shadow-modal:0 1.625rem 5rem rgba(0, 0, 0, 0.2), 0 0 0.0625rem rgba(0, 0, 0, 0.2); --p-shadows-inset-button:inset 0 -0.0625rem 0 rgba(0, 0, 0, 0.2); --p-shadows-inset-button-pressed:inset 0 0.0625rem 0 rgba(0, 0, 0, 0.15); --p-font-family-sans:-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --p-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; --p-font-size-75:0.75rem; --p-font-size-100:0.875rem; --p-font-size-200:1rem; --p-font-size-300:1.25rem; --p-font-size-400:1.5rem; --p-font-size-500:1.75rem; --p-font-size-600:2rem; --p-font-size-700:2.5rem; --p-font-weight-regular:400; --p-font-weight-medium:500; --p-font-weight-semibold:600; --p-font-weight-bold:700; --p-font-line-height-1:1rem; --p-font-line-height-2:1.25rem; --p-font-line-height-3:1.5rem; --p-font-line-height-4:1.75rem; --p-font-line-height-5:2rem; --p-font-line-height-6:2.5rem; --p-font-line-height-7:3rem; --p-override-loading-z-index:514; --p-choice-size:1.25rem; --p-icon-size-small:0.5rem; --p-icon-size-medium:1.25rem; --p-choice-margin:0.0625rem; --p-control-border-width:0.125rem; --p-banner-border-default:inset 0 0.0625rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.0625rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.0625rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.0625rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.0625rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.0625rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.0625rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.0625rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.0625rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.0625rem var(--p-border-critical-subdued); --p-thin-border-subdued:0.0625rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.125rem; --p-text-field-focus-ring-offset:-0.25rem; --p-button-group-item-spacing:-0.0625rem; --p-range-slider-thumb-size-base:1rem; --p-range-slider-thumb-size-active:1.5rem; --p-frame-offset:0rem; --p-duration-0:0ms; --p-duration-50:50ms; --p-duration-100:100ms; --p-duration-150:150ms; --p-duration-200:200ms; --p-duration-250:250ms; --p-duration-300:300ms; --p-duration-350:350ms; --p-duration-400:400ms; --p-duration-450:450ms; --p-duration-500:500ms; --p-duration-5000:5000ms; --p-ease:cubic-bezier(0.25, 0.1, 0.25, 1); --p-ease-in:cubic-bezier(0.42, 0, 1, 1); --p-ease-out:cubic-bezier(0, 0, 0.58, 1); --p-ease-in-out:cubic-bezier(0.42, 0, 0.58, 1); --p-linear:cubic-bezier(0, 0, 1, 1); --p-keyframes-bounce:p-keyframes-bounce; --p-keyframes-fade-in:p-keyframes-fade-in; --p-keyframes-pulse:p-keyframes-pulse; --p-keyframes-spin:p-keyframes-spin; --p-border-radius-05:0.125rem; --p-border-radius-1:0.25rem; --p-border-radius-2:0.5rem; --p-border-radius-3:0.75rem; --p-border-radius-4:1rem; --p-border-radius-5:1.25rem; --p-border-radius-6:1.875rem; --p-border-radius-base:0.1875rem; --p-border-radius-large:0.375rem; --p-border-radius-half:50%; --p-border-width-1:0.0625rem; --p-border-width-2:0.125rem; --p-border-width-3:0.1875rem; --p-border-width-4:0.25rem; --p-border-width-5:0.3125rem; --p-border-base:var(--p-border-width-1) solid var(--p-border-subdued); --p-border-dark:var(--p-border-width-1) solid var(--p-border); --p-border-transparent:var(--p-border-width-1) solid transparent; --p-border-divider:var(--p-border-width-1) solid var(--p-divider); --p-border-divider-on-dark:var(--p-border-width-1) solid var(--p-divider-dark); --p-space-0:0; --p-space-025:0.0625rem; --p-space-05:0.125rem; --p-space-1:0.25rem; --p-space-2:0.5rem; --p-space-3:0.75rem; --p-space-4:1rem; --p-space-5:1.25rem; --p-space-6:1.5rem; --p-space-8:2rem; --p-space-10:2.5rem; --p-space-12:3rem; --p-space-16:4rem; --p-space-20:5rem; --p-space-24:6rem; --p-space-28:7rem; --p-space-32:8rem; --p-z-1:100; --p-z-2:400; --p-z-3:510; --p-z-4:512; --p-z-5:513; --p-z-6:514; --p-z-7:515; --p-z-8:516; --p-z-9:517; --p-z-10:518; --p-z-11:519; --p-z-12:520; }

@keyframes p-keyframes-bounce { from, 65%, 85% { transform: scale(1); }
  75% { transform: scale(0.85); }
  82.5% { transform: scale(1.05); } }

@keyframes p-keyframes-fade-in { to { opacity: 1; } }

@keyframes p-keyframes-pulse { from, 75% { transform: scale(0.85);
    opacity: 1; }
  to { transform: scale(2.5);
    opacity: 0; } }

@keyframes p-keyframes-spin { to { transform: rotate(1turn); } }


.Polaris-Avatar { --pc-avatar-extra-small-size: 1.5rem; --pc-avatar-small-size: 2rem; --pc-avatar-medium-size: 2.5rem; --pc-avatar-large-size: 3.75rem; position: relative; display: block; overflow: hidden; min-width: var(--pc-avatar-extra-small-size); max-width: 100%; background: var(--p-surface-neutral); color: var(--p-icon-subdued); -webkit-user-select: none; user-select: none; }

@media (forced-colors: active) { .Polaris-Avatar { border: var(--p-border-width-1) solid transparent; } }

.Polaris-Avatar::after { content: ''; display: block; padding-bottom: 100%; }

.Polaris-Avatar--shapeRound { border-radius: var(--p-border-radius-half); }

.Polaris-Avatar--shapeSquare { border-radius: var(--p-border-radius-05); }

.Polaris-Avatar--hidden { visibility: hidden; }

.Polaris-Avatar--sizeExtraSmall { width: var(--pc-avatar-extra-small-size); }

.Polaris-Avatar--sizeSmall { width: var(--pc-avatar-small-size); }

.Polaris-Avatar--sizeMedium { width: var(--pc-avatar-medium-size); }

.Polaris-Avatar--sizeLarge { width: var(--pc-avatar-large-size); }

.Polaris-Avatar--styleOne { color: var(--p-decorative-one-text); background: var(--p-decorative-one-surface); }

.Polaris-Avatar--styleTwo { color: var(--p-decorative-two-text); background: var(--p-decorative-two-surface); }

.Polaris-Avatar--styleThree { color: var(--p-decorative-three-text); background: var(--p-decorative-three-surface); }

.Polaris-Avatar--styleFour { color: var(--p-decorative-four-text); background: var(--p-decorative-four-surface); }

.Polaris-Avatar--styleFive { color: var(--p-decorative-five-text); background: var(--p-decorative-five-surface); }

.Polaris-Avatar--imageHasLoaded { background: transparent; }

.Polaris-Avatar__Image { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: inherit; transform: translate(-50%, -50%); object-fit: cover; }

.Polaris-Avatar__Initials { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.Polaris-Avatar__Svg { width: 100%; height: 100%; }


.Polaris-VisuallyHidden { position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }


.Polaris-Icon { display: block; height: 1.25rem; width: 1.25rem; max-height: 100%; max-width: 100%; margin: auto; }

.Polaris-Icon--applyColor { color: var(--p-surface); }

.Polaris-Icon--hasBackdrop { position: relative; display: flex; align-items: center; margin: var(--p-space-1); }

.Polaris-Icon--hasBackdrop::before { content: ''; position: absolute; top: calc(var(--p-space-1)*-1); bottom: calc(var(--p-space-1)*-1); left: calc(var(--p-space-1)*-1); right: calc(var(--p-space-1)*-1); border-radius: var(--p-border-radius-half); }

.Polaris-Icon--colorBase svg { fill: var(--p-icon); }

.Polaris-Icon--colorBase::before { background-color: var(--p-surface-neutral); }

.Polaris-Icon--colorSubdued svg { fill: var(--p-icon-subdued); }

.Polaris-Icon--colorCritical svg { fill: var(--p-icon-critical); }

.Polaris-Icon--colorCritical::before { background-color: var(--p-surface-critical); }

.Polaris-Icon--colorInteractive svg { fill: var(--p-interactive); }

.Polaris-Icon--colorWarning svg { fill: var(--p-icon-warning); }

.Polaris-Icon--colorWarning::before { background-color: var(--p-surface-warning); }

.Polaris-Icon--colorHighlight svg { fill: var(--p-icon-highlight); }

.Polaris-Icon--colorHighlight::before { background-color: var(--p-surface-highlight); }

.Polaris-Icon--colorSuccess svg { fill: var(--p-icon-success); }

.Polaris-Icon--colorSuccess::before { background-color: var(--p-surface-success); }

.Polaris-Icon--colorPrimary svg { fill: var(--p-action-primary); }

.Polaris-Icon__Svg, .Polaris-Icon__Img { position: relative; display: block; width: 100%; max-width: 100%; max-height: 100%; }

.Polaris-Icon__Placeholder { padding-bottom: 100%; background: currentColor; }


.Polaris-Spinner svg { animation: var(--p-keyframes-spin) var(--p-duration-500) linear infinite; fill: var(--p-border-highlight); }

.Polaris-Spinner--sizeSmall svg { height: 1.25rem; width: 1.25rem; }

.Polaris-Spinner--sizeLarge svg { height: 2.75rem; width: 2.75rem; }


.Polaris-Scrollable { --pc-scrollable-shadow-size: var(--p-space-5); --pc-scrollable-shadow-bottom: inset 0
    calc(var(--pc-scrollable-shadow-size)*-1) var(--pc-scrollable-shadow-size)
    calc(var(--pc-scrollable-shadow-size)*-1) var(--p-hint-from-direct-light); --pc-scrollable-shadow-top: inset 0 var(--pc-scrollable-shadow-size)
    var(--pc-scrollable-shadow-size) calc(var(--pc-scrollable-shadow-size)*-1)
    var(--p-hint-from-direct-light); --pc-scrollable-max-height: none; -webkit-overflow-scrolling: touch; position: relative; max-height: var(--pc-scrollable-max-height); }

.Polaris-Scrollable:focus { outline: var(--p-border-width-2) solid var(--p-focused); outline-offset: 0.125rem; }

.Polaris-Scrollable--horizontal { overflow-x: auto; }

.Polaris-Scrollable--vertical { overflow-y: auto; }

.Polaris-Scrollable--verticalHasScrolling { overflow-y: scroll; }

.Polaris-Scrollable--hasTopShadow { box-shadow: var(--pc-scrollable-shadow-top); }

.Polaris-Scrollable--hasBottomShadow { box-shadow: var(--pc-scrollable-shadow-bottom); }

.Polaris-Scrollable--hasTopShadow.Polaris-Scrollable--hasBottomShadow { box-shadow: var(--pc-scrollable-shadow-top), var(--pc-scrollable-shadow-bottom); }


.Polaris-Popover { max-width: calc(100vw - var(--p-space-8)); margin: 0.3125rem var(--p-space-2) var(--p-space-4); box-shadow: var(--p-shadow-popover); border-radius: var(--p-border-radius-2); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: left, top; }

.Polaris-Popover__PopoverOverlay { opacity: 0; transition: opacity var(--p-duration-100) var(--p-ease), transform var(--p-duration-100) var(--p-ease); transform: translateY(-0.3125rem); }

.Polaris-Popover__PopoverOverlay--entering { opacity: 1; transform: translateY(0); }

.Polaris-Popover__PopoverOverlay--open { opacity: 1; transform: none; }

.Polaris-Popover__PopoverOverlay--exiting { opacity: 1; transform: translateY(0); transition-duration: var(--p-duration-0); }

.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting) { opacity: 0; transform: translateY(-0.3125rem); }

.Polaris-Popover--fullWidth { margin: 0.3125rem auto 0 auto; }

.Polaris-Popover--fullWidth .Polaris-Popover__Content { max-width: none; }

.Polaris-Popover--positionedAbove { margin: var(--p-space-4) var(--p-space-2) 0.3125rem; }

.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth { margin: 0 auto 0.3125rem auto; }

.Polaris-Popover__Wrapper { position: relative; overflow: hidden; background-color: var(--p-surface); border-radius: var(--p-border-radius-2); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Popover__Content { position: relative; display: flex; flex-direction: column; border-radius: var(--p-border-radius-1); max-width: 25rem; max-height: 31.25rem; }

.Polaris-Popover__Content:focus { outline: none; }

.Polaris-Popover__Content--fullHeight { max-height: none; }

.Polaris-Popover__Content--fluidContent { max-height: none; max-width: none; }

.Polaris-Popover__Pane { flex: 1 1; max-width: 100%; }

.Polaris-Popover__Pane + .Polaris-Popover__Pane { border-top: var(--p-border-divider); }

.Polaris-Popover__Pane:focus { outline: none; }

.Polaris-Popover__Pane--fixed { overflow: visible; flex: 0 0 auto; }

.Polaris-Popover__Section { padding: var(--p-space-4); }

.Polaris-Popover__Section + .Polaris-Popover__Section { border-top: var(--p-border-divider); }

.Polaris-Popover__FocusTracker { position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }

@media print { .Polaris-Popover__PopoverOverlay--hideOnPrint { display: none !important; } }


.Polaris-PositionedOverlay { position: absolute; z-index: var(--p-z-2); }

.Polaris-PositionedOverlay--fixed { position: fixed; }

.Polaris-PositionedOverlay--calculating { visibility: hidden; }

.Polaris-PositionedOverlay--preventInteraction { pointer-events: none; }


.Polaris-Badge { --pc-badge-horizontal-padding: var(--p-space-2); --pc-badge-vertical-padding: var(--p-space-05); display: inline-flex; align-items: center; padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding); background-color: var(--p-surface-neutral); border-radius: var(--p-border-radius-5); font-size: 0.8125rem; line-height: var(--p-font-line-height-1); color: var(--p-text); font-weight: var(--p-font-weight-regular); }

@media print { .Polaris-Badge { border: solid var(--p-border-width-1) var(--p-border); } }

.Polaris-Badge--sizeSmall { font-size: var(--p-font-size-75); }

.Polaris-Badge--statusSuccess { background-color: var(--p-surface-success); color: var(--p-text); }

.Polaris-Badge--statusInfo { background-color: var(--p-surface-highlight); color: var(--p-text); }

.Polaris-Badge--statusAttention { background-color: var(--p-surface-attention); color: var(--p-text); }

.Polaris-Badge--statusWarning { background-color: var(--p-surface-warning); color: var(--p-text); }

.Polaris-Badge--statusCritical { background-color: var(--p-surface-critical); color: var(--p-text); }

.Polaris-Badge--statusNew { color: var(--p-text); font-weight: var(--p-font-weight-medium); border: none; }

.Polaris-Badge--withinFilter { border-radius: var(--p-border-radius-1); }

.Polaris-Badge__Icon { margin-left: calc((var(--p-space-1))*-1); }

.Polaris-Badge__Icon + *:not(.Polaris-Badge__Icon) { margin-left: var(--p-space-1); }

.Polaris-Badge__PipContainer { display: grid; align-items: center; margin-left: calc(var(--p-space-05)*-1); margin-right: var(--p-space-1); }


.Polaris-Badge-Pip { --pc-pip-size: var(--p-space-2); --pc-pip-color: var(--p-icon); display: inline-block; color: var(--pc-pip-color); height: var(--pc-pip-size); width: var(--pc-pip-size); border: var(--p-border-width-2) solid var(--pc-pip-color); border-radius: var(--p-border-radius-half); flex-shrink: 0; }

.Polaris-Badge-Pip--statusInfo { --pc-pip-color: var(--p-icon-highlight); }

.Polaris-Badge-Pip--statusSuccess { --pc-pip-color: var(--p-icon-success); }

.Polaris-Badge-Pip--statusNew { --pc-pip-color: var(--p-icon); }

.Polaris-Badge-Pip--statusAttention { --pc-pip-color: var(--p-icon-attention); }

.Polaris-Badge-Pip--statusWarning { --pc-pip-color: var(--p-icon-warning); }

.Polaris-Badge-Pip--statusCritical { --pc-pip-color: var(--p-icon-critical); }

.Polaris-Badge-Pip--progressIncomplete { background: transparent; }

.Polaris-Badge-Pip--progressPartiallyComplete { background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent); }

@media print { .Polaris-Badge-Pip--progressPartiallyComplete { background: none; box-shadow: 0 -6.375rem 0 -6.25rem currentColor inset; } }

.Polaris-Badge-Pip--progressComplete { background: currentColor; }

@media print { .Polaris-Badge-Pip--progressComplete { background: none; box-shadow: 0 0 0 6.25rem currentColor inset; } }


.Polaris-TextStyle--variationPositive { color: var(--p-text-success); }

.Polaris-TextStyle--variationNegative { color: var(--p-text-critical); }

.Polaris-TextStyle--variationWarning { color: var(--p-text-warning); }

.Polaris-TextStyle--variationCode { position: relative; padding: 0 var(--p-space-1); border-radius: var(--p-border-radius-base); background-color: var(--p-surface-subdued); display: inline-block; font-size: var(--p-font-size-200); box-shadow: inset 0 0 0 0.0625rem var(--p-border-subdued); }

.Polaris-TextStyle--variationCode::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: var(--p-border-width-1) solid transparent; pointer-events: none; }

.Polaris-TextStyle--variationStrong { font-weight: var(--p-font-weight-semibold); }

.Polaris-TextStyle--variationSubdued { color: var(--p-text-subdued); }

@media print { .Polaris-TextStyle--variationSubdued { color: var(--p-text-subdued); } }


.Polaris-ActionList { outline: none; list-style: none; margin: 0; padding: 0; }

.Polaris-ActionList__Section--withoutTitle:not(:first-child) { border-top: var(--p-border-divider); }

.Polaris-ActionList__Actions { outline: none; list-style: none; margin: 0; border-top: var(--p-border-divider); padding: var(--p-space-2); }

.Polaris-ActionList > .Polaris-ActionList__Section--withoutTitle .Polaris-ActionList__Actions, .Polaris-ActionList__Section:first-child > .Polaris-ActionList__Section--withoutTitle .Polaris-ActionList__Actions { border-top: none; }

.Polaris-ActionList__Title { font-size: 0.8125rem; font-weight: var(--p-font-weight-semibold); line-height: var(--p-font-line-height-1); text-transform: uppercase; padding: var(--p-space-3) var(--p-space-4) var(--p-space-3) var(--p-space-4); }

@media (min-width: 48em) { .Polaris-ActionList__Title { font-size: var(--p-font-size-75); } }

.Polaris-ActionList__Section:not(:first-child) .Polaris-ActionList__Title { padding-top: var(--p-space-1); }

.Polaris-ActionList__Item { --pc-action-list-image-size: 1.25rem; --pc-action-list-item-min-height: var(--p-space-10); --pc-action-list-item-vertical-padding: calc((var(--pc-action-list-item-min-height) - var(--p-font-line-height-2))/2); -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; position: relative; display: block; width: 100%; min-height: var(--pc-action-list-item-min-height); text-align: left; text-decoration: none; cursor: pointer; padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2); border-radius: var(--p-border-radius-1); border-top: var(--p-border-width-1) solid transparent; color: inherit; }

.Polaris-ActionList__Item:focus { outline: none; }

.Polaris-ActionList__Item::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

@media (forced-colors: active) { .Polaris-ActionList__Item { border: var(--p-border-width-1) solid transparent; } }

.Polaris-ActionList__Item:hover { background-color: var(--p-surface-hovered); text-decoration: none; outline: var(--p-border-width-3) solid transparent; }

.Polaris-ActionList__Item:active { background-color: var(--p-surface-pressed); }

.Polaris-ActionList__Item:active svg { fill: var(--p-interactive); }

.Polaris-ActionList__Item:focus:not(:active) { outline: var(--p-border-width-3) solid transparent; }

.Polaris-ActionList__Item:focus:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-ActionList__Item:visited { color: inherit; }

.Polaris-ActionList__Item.Polaris-ActionList--active { background-color: var(--p-surface-selected); }

.Polaris-ActionList__Item.Polaris-ActionList--active svg { fill: var(--p-interactive); }

.Polaris-ActionList__Item.Polaris-ActionList--active::before { content: ''; background-color: var(--p-interactive); position: absolute; top: 0; left: calc(var(--p-space-2)*-1); height: 100%; display: block; width: var(--p-border-width-3); border-top-right-radius: var(--p-border-radius-1); border-bottom-right-radius: var(--p-border-radius-1); }

.Polaris-ActionList__Item.Polaris-ActionList--destructive { color: var(--p-interactive-critical); }

.Polaris-ActionList__Item.Polaris-ActionList--destructive svg { fill: var(--p-icon-critical); }

.Polaris-ActionList__Item.Polaris-ActionList--destructive:hover { background-color: var(--p-surface-critical-subdued-hovered); }

.Polaris-ActionList__Item.Polaris-ActionList--destructive:active, .Polaris-ActionList__Item.Polaris-ActionList--destructive.Polaris-ActionList--active { background-color: var(--p-surface-critical-subdued-pressed); }

.Polaris-ActionList__Item.Polaris-ActionList--disabled { background-image: none; color: var(--p-text-disabled); }

.Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Prefix svg, .Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Suffix svg { fill: var(--p-icon-disabled); }

.Polaris-ActionList__Content { display: flex; align-items: center; }

.Polaris-ActionList__Prefix { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; height: var(--pc-action-list-image-size); width: var(--pc-action-list-image-size); border-radius: var(--p-border-radius-base); margin: calc(var(--pc-action-list-image-size)*-0.5) var(--p-space-4) calc(var(--pc-action-list-image-size)*-0.5) 0; background-size: cover; background-position: center center; }

.Polaris-ActionList__Prefix svg { fill: var(--p-icon); }

.Polaris-ActionList__Suffix { margin-left: var(--p-space-4); }

.Polaris-ActionList__Suffix svg { fill: var(--p-icon); }

.Polaris-ActionList__ContentBlock, .Polaris-ActionList__ContentBlockInner { display: block; }

.Polaris-ActionList__Text { min-width: 0; max-width: 100%; flex: 1 1 auto; }


.Polaris-Button { --pc-button-slim-min-height: var(--p-font-line-height-4); --pc-button-large-min-height: 2.75rem; --pc-button-vertical-padding: calc((2.25rem - var(--p-font-line-height-2) - var(--p-space-05))/2); --pc-button-slim-vertical-padding: calc((var(--pc-button-slim-min-height) - var(--p-font-line-height-2) - var(--p-space-05))/2); --pc-button-large-vertical-padding: calc((var(--pc-button-large-min-height) - var(--p-font-line-height-2) - var(--p-space-05))/2); --pc-button-spinner-size: 1.25rem; --pc-button-segment: 10; --pc-button-focused: 20; --pc-button-disclosure-icon-offset: -0.375rem; position: relative; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 2.25rem; margin: 0; padding: calc((2.25rem - var(--p-font-line-height-2) - var(--p-space-05))/2) var(--p-space-4); background: var(--p-surface); box-shadow: var(--p-shadow-button); border-radius: var(--p-border-radius-1); color: var(--p-text); border: var(--p-border-width-1) solid var(--p-border-neutral-subdued); border-top-color: var(--p-border-subdued); border-bottom-color: var(--p-border-shadow-subdued); line-height: 1; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; -webkit-tap-highlight-color: transparent; }

.Polaris-Button svg { fill: var(--p-icon); }

.Polaris-Button::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-1)*-1 + -0.0625rem); right: calc(var(--p-border-width-1)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-1)*-1 + -0.0625rem); left: calc(var(--p-border-width-1)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-1)*-1 + -0.0625rem) var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Button:hover { background: var(--p-action-secondary-hovered); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button:focus { box-shadow: var(--p-shadow-button); outline: 0; }

.Polaris-Button:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button:active { background: var(--p-action-secondary-pressed); box-shadow: var(--p-shadow-button); }

.Polaris-Button:active::after { border: none; box-shadow: none; }

.Polaris-Button.Polaris-Button--pressed { background: var(--p-action-secondary-depressed); box-shadow: var(--p-shadows-inset-button-pressed); color: var(--p-text-on-primary); border-color: var(--p-border-depressed); }

.Polaris-Button.Polaris-Button--pressed svg { fill: currentColor; }

@media (-ms-high-contrast: active) { .Polaris-Button { border: var(--p-border-width-1) solid windowText; } }

.Polaris-Button.Polaris-Button--disabled { transition: none; box-shadow: none; border-color: var(--p-border-disabled); background: var(--p-surface-disabled); color: var(--p-text-disabled); }

.Polaris-Button.Polaris-Button--disabled svg { fill: var(--p-icon-disabled); }

.Polaris-Button.Polaris-Button--connectedDisclosure { z-index: var(--pc-button-segment); border-top-right-radius: 0; border-bottom-right-radius: 0; }

.Polaris-Button.Polaris-Button--connectedDisclosure::after { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.Polaris-Button.Polaris-Button--connectedDisclosure:focus { z-index: var(--pc-button-focused); }

.Polaris-Button__Content { font-size: 0.9375rem; font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-1); text-transform: initial; letter-spacing: initial; position: relative; display: flex; justify-content: center; align-items: center; min-width: 0.0625rem; min-height: 0.0625rem; }

@media (min-width: 48em) { .Polaris-Button__Content { font-size: var(--p-font-size-100); } }

.Polaris-Button:not(.Polaris-Button--plain) .Polaris-Button__Content { width: 100%; }

.Polaris-Button--textAlignLeft { justify-content: flex-start; text-align: left; }

.Polaris-Button--textAlignLeft .Polaris-Button__Content { justify-content: flex-start; }

.Polaris-Button--textAlignStart { justify-content: flex-start; text-align: start; }

.Polaris-Button--textAlignStart .Polaris-Button__Content { justify-content: flex-start; }

.Polaris-Button--textAlignCenter { justify-content: center; text-align: center; }

.Polaris-Button--textAlignRight { justify-content: flex-end; text-align: right; }

.Polaris-Button--textAlignRight .Polaris-Button__Content { justify-content: flex-end; }

.Polaris-Button--textAlignEnd { justify-content: flex-end; text-align: end; }

.Polaris-Button--textAlignEnd .Polaris-Button__Content { justify-content: flex-end; }

.Polaris-Button__Icon { margin-left: calc((var(--p-space-1))*-1); }

.Polaris-Button__Icon:last-child { margin-right: var(--pc-button-disclosure-icon-offset); margin-left: var(--p-space-1); }

.Polaris-Button--fullWidth.Polaris-Button--textAlignLeft .Polaris-Button__Icon:last-child:not(:only-child) { margin-left: auto; }

.Polaris-Button__Icon + *:not(.Polaris-Button__Icon) { margin-left: var(--p-space-1); }

.Polaris-Button--hidden { visibility: hidden; }

.Polaris-Button__Spinner { position: absolute; top: 50%; left: 50%; margin-top: calc((var(--pc-button-spinner-size)/2)*-1); margin-left: calc((var(--pc-button-spinner-size)/2)*-1); }

.Polaris-Button--primary, .Polaris-Button--destructive { position: relative; background: var(--pc-button-color); border-width: 0; border-color: transparent; box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button); color: var(--pc-button-text); }

.Polaris-Button--primary::after, .Polaris-Button--destructive::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Button--primary:hover, .Polaris-Button--destructive:hover { background: var(--pc-button-color-hover); border-color: transparent; color: var(--pc-button-text); }

.Polaris-Button--primary:focus, .Polaris-Button--destructive:focus { border-color: transparent; box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button); }

.Polaris-Button--primary:active, .Polaris-Button--destructive:active { background: var(--pc-button-color-active); border-color: transparent; box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button); }

.Polaris-Button--primary.Polaris-Button--pressed, .Polaris-Button--destructive.Polaris-Button--pressed { color: var(--pc-button-text); background: var(--pc-button-color-depressed); border-color: transparent; box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button); }

.Polaris-Button--primary.Polaris-Button--pressed:hover, .Polaris-Button--primary.Polaris-Button--pressed:focus, .Polaris-Button--destructive.Polaris-Button--pressed:hover, .Polaris-Button--destructive.Polaris-Button--pressed:focus { background: var(--pc-button-color-depressed); box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button); }

.Polaris-Button--primary.Polaris-Button--disabled, .Polaris-Button--destructive.Polaris-Button--disabled { color: var(--p-text-disabled); box-shadow: none; border-color: transparent; }

.Polaris-Button--primary.Polaris-Button--disabled svg, .Polaris-Button--destructive.Polaris-Button--disabled svg { fill: var(--p-icon-disabled); }

.Polaris-Button--primary { --pc-button-color: var(--p-action-primary); --pc-button-text: var(--p-text-on-primary); --pc-button-color-hover: var(--p-action-primary-hovered); --pc-button-color-active: var(--p-action-primary-pressed); --pc-button-color-depressed: var(--p-action-primary-depressed); }

.Polaris-Button--primary svg { fill: var(--p-icon-on-primary); }

.Polaris-Button--primary.Polaris-Button--disabled { background: var(--p-action-primary-disabled); }

.Polaris-Button--destructive { --pc-button-color: var(--p-action-critical); --pc-button-text: var(--p-text-on-critical); --pc-button-color-hover: var(--p-action-critical-hovered); --pc-button-color-active: var(--p-action-critical-pressed); --pc-button-color-depressed: var(--p-action-critical-depressed); }

.Polaris-Button--destructive svg { fill: var(--p-icon-on-critical); }

.Polaris-Button--destructive.Polaris-Button--disabled { background: var(--p-action-critical-disabled); }

.Polaris-Button--outline { background: transparent; border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--p-text); position: relative; }

.Polaris-Button--outline::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Button--outline:hover { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-hovered); }

.Polaris-Button--outline:focus { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; }

.Polaris-Button--outline:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button--outline:active { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-pressed); }

.Polaris-Button--outline:active::after { box-shadow: none; }

.Polaris-Button--outline.Polaris-Button--pressed { background: var(--p-action-secondary-pressed); border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--pc-button-text); }

.Polaris-Button--outline.Polaris-Button--disabled { border: var(--p-border-width-1) solid var(--p-border-disabled); box-shadow: none; background: transparent; color: var(--p-text-disabled); }

.Polaris-Button--outline.Polaris-Button--destructive { background: transparent; border: var(--p-border-width-1) solid var(--p-border-critical); box-shadow: none; color: var(--p-interactive-critical); }

.Polaris-Button--outline.Polaris-Button--destructive svg { fill: var(--p-icon-critical); }

.Polaris-Button--outline.Polaris-Button--destructive:hover { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); }

.Polaris-Button--outline.Polaris-Button--destructive:focus { border: var(--p-border-width-1) solid var(--p-border-critical); }

.Polaris-Button--outline.Polaris-Button--destructive:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button--outline.Polaris-Button--destructive:active { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); }

.Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--disabled { border: var(--p-border-width-1) solid var(--p-border-critical-disabled); background: transparent; color: var(--p-interactive-critical-disabled); }

.Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--pressed { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); color: var(--p-interactive-critical); }

.Polaris-Button--outline.Polaris-Button--disabled { background: transparent; box-shadow: none; }

.Polaris-Button--destructive.Polaris-Button--outline { background: transparent; border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--p-text); position: relative; }

.Polaris-Button--destructive.Polaris-Button--outline::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Button--destructive.Polaris-Button--outline:hover { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-hovered); }

.Polaris-Button--destructive.Polaris-Button--outline:focus { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; }

.Polaris-Button--destructive.Polaris-Button--outline:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button--destructive.Polaris-Button--outline:active { border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-pressed); }

.Polaris-Button--destructive.Polaris-Button--outline:active::after { box-shadow: none; }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--pressed { background: var(--p-action-secondary-pressed); border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--pc-button-text); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--disabled { border: var(--p-border-width-1) solid var(--p-border-disabled); box-shadow: none; background: transparent; color: var(--p-text-disabled); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive { background: transparent; border: var(--p-border-width-1) solid var(--p-border-critical); box-shadow: none; color: var(--p-interactive-critical); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive svg { fill: var(--p-icon-critical); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:hover { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:focus { border: var(--p-border-width-1) solid var(--p-border-critical); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:active { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--disabled { border: var(--p-border-width-1) solid var(--p-border-critical-disabled); background: transparent; color: var(--p-interactive-critical-disabled); }

.Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--pressed { border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); color: var(--p-interactive-critical); }

.Polaris-Button--disabled { cursor: default; pointer-events: none; }

.Polaris-Button--loading { position: relative; }

.Polaris-Button--loading, .Polaris-Button--loading:hover, .Polaris-Button--loading.Polaris-Button--disabled { color: transparent; }

.Polaris-Button--loading.Polaris-Button--disabled svg { fill: var(--p-icon-subdued); }

.Polaris-Button--plain { margin: calc(var(--pc-button-vertical-padding)*-1) calc(var(--p-space-2)*-1); padding-left: var(--p-space-2); padding-right: var(--p-space-2); background: transparent; border: 0; box-shadow: none; color: var(--p-interactive); }

.Polaris-Button--plain svg { fill: var(--p-interactive); }

.Polaris-Button--plain > .Polaris-Button__Content { font-weight: var(--p-font-weight-regular); position: relative; }

.Polaris-Button--plain > .Polaris-Button__Content::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Button--plain:hover, .Polaris-Button--plain:focus:not(.Polaris-Button--disabled) { color: var(--p-interactive-hovered); background: transparent; box-shadow: none; }

.Polaris-Button--plain:hover svg, .Polaris-Button--plain:focus:not(.Polaris-Button--disabled) svg { fill: var(--p-interactive-hovered); }

.Polaris-Button--plain:hover:not(.Polaris-Button--removeUnderline), .Polaris-Button--plain:focus:not(.Polaris-Button--disabled):not(.Polaris-Button--removeUnderline) { text-decoration: underline; }

.Polaris-Button--plain.Polaris-Button--pressed, .Polaris-Button--plain:active { color: var(--p-interactive-pressed); background: transparent; box-shadow: none; }

.Polaris-Button--plain.Polaris-Button--pressed svg, .Polaris-Button--plain:active svg { fill: var(--p-interactive-pressed); }

@media (-ms-high-contrast: active) { .Polaris-Button--plain.Polaris-Button--pressed, .Polaris-Button--plain:active { outline: none; } }

.Polaris-Button--plain:focus::after { content: none; }

@media (-ms-high-contrast: active) { .Polaris-Button--plain:focus { outline: none; } }

@media (-ms-high-contrast: active) { .Polaris-Button--plain:focus > .Polaris-Button__Content { outline: var(--p-border-width-2) dotted; } }

.Polaris-Button--plain:focus:not(:active) > .Polaris-Button__Content::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Button--plain:active:not(.Polaris-Button--iconOnly) > .Polaris-Button__Content, .Polaris-Button--plain.Polaris-Button--pressed:not(.Polaris-Button--iconOnly) > .Polaris-Button__Content { padding: var(--p-space-05) var(--p-space-1); margin: calc(var(--p-space-05)*-1) calc(var(--p-space-1)*-1); background: transparent; border-radius: var(--p-border-radius-base); }

.Polaris-Button--plain.Polaris-Button--fullWidth { margin-left: 0; margin-right: 0; }

.Polaris-Button--plain.Polaris-Button--disabled { color: var(--p-text-disabled); background: none; }

.Polaris-Button--plain.Polaris-Button--disabled.Polaris-Button--loading { color: transparent; }

.Polaris-Button--plain.Polaris-Button--destructive { color: var(--p-interactive-critical); }

.Polaris-Button--plain.Polaris-Button--destructive svg { fill: var(--p-interactive-critical); }

.Polaris-Button--plain.Polaris-Button--destructive:hover { color: var(--p-interactive-critical-hovered); }

.Polaris-Button--plain.Polaris-Button--destructive:active, .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--pressed { color: var(--p-interactive-critical-pressed); }

.Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--disabled { color: var(--p-interactive-critical-disabled); }

.Polaris-Button--plain.Polaris-Button--sizeSlim { margin-top: calc(var(--pc-button-slim-vertical-padding)*-1); margin-bottom: calc(var(--pc-button-slim-vertical-padding)*-1); }

.Polaris-Button--plain.Polaris-Button--sizeLarge { margin: calc(var(--pc-button-large-vertical-padding)*-1) calc(var(--p-space-5)*-1); }

.Polaris-Button--plain.Polaris-Button--iconOnly { margin: calc((2.25rem - var(--p-icon-size-medium))*-0.5); }

.Polaris-Button--plain.Polaris-Button--iconOnly svg {