UNPKG

@shopify/polaris

Version:

Shopify’s admin product component library

838 lines (411 loc) • 281 kB
@charset "UTF-8"; :root{ --polaris-version-number:'7.4.1'; --polaris-animation-skeleton-shimmer:polaris-SkeletonShimmerAnimation; } html, body{ font-size:1.5rem; font-weight:400; line-height:2rem; text-transform:initial; letter-spacing:initial; font-weight:400; color:var(--p-text); } @media (min-width: 40em){ html, body{ font-size:1.4rem; } } html, body, button{ font-family:-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; } html{ position:relative; font-size:62.5%; -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:400; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner{ border-style:none; } @keyframes polaris-SkeletonShimmerAnimation{ 0%{ opacity:0.45; } 100%{ opacity:0.9; } } .Polaris-Avatar{ position:relative; display:block; overflow:hidden; min-width:2.4rem; max-width:100%; background:var(--p-surface-neutral); color:var(--p-icon-subdued); border-radius:3rem; -webkit-user-select:none; user-select:none; } @media (forced-colors: active){ .Polaris-Avatar{ border:0.1rem solid transparent; } } .Polaris-Avatar::after{ content:''; display:block; padding-bottom:100%; } .Polaris-Avatar--hidden{ visibility:hidden; } .Polaris-Avatar--sizeExtraSmall{ width:2.4rem; } .Polaris-Avatar--sizeSmall{ width:3.2rem; } .Polaris-Avatar--sizeMedium{ width:4rem; } .Polaris-Avatar--sizeLarge{ width:6rem; } .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--hasImage{ background:transparent; } .Polaris-Avatar__Image{ position:absolute; top:50%; left:50%; width:100%; height:100%; background-color:var(--p-background); border-radius:3rem; 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; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; -webkit-clip-path:inset(50%) !important; clip-path:inset(50%) !important; border:0 !important; white-space:nowrap !important; } .Polaris-Icon{ display:block; height:2rem; width:2rem; 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:0.4rem; } .Polaris-Icon--hasBackdrop::before{ content:''; position:absolute; top:-0.4rem; bottom:-0.4rem; left:-0.4rem; right:-0.4rem; border-radius:50%; } .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; } @keyframes Polaris-Spinner--loading{ to{ transform:rotate(360deg); } } .Polaris-Spinner svg{ animation:Polaris-Spinner--loading 500ms linear infinite; fill:var(--p-border-highlight); } .Polaris-Spinner--sizeSmall svg{ height:2rem; width:2rem; } .Polaris-Spinner--sizeLarge svg{ height:4.4rem; width:4.4rem; } .Polaris-Scrollable{ -webkit-overflow-scrolling:touch; position:relative; } .Polaris-Scrollable:focus{ outline:2px solid var(--p-focused); outline-offset:2px; } .Polaris-Scrollable--horizontal{ overflow-x:auto; } .Polaris-Scrollable--vertical{ overflow-y:auto; } .Polaris-Scrollable--verticalHasScrolling{ overflow-y:scroll; } .Polaris-Scrollable--hasTopShadow{ box-shadow:inset 0 2rem 2rem -2rem var(--p-hint-from-direct-light); } .Polaris-Scrollable--hasBottomShadow{ box-shadow:inset 0 -2rem 2rem -2rem var(--p-hint-from-direct-light); } .Polaris-Scrollable--hasTopShadow.Polaris-Scrollable--hasBottomShadow{ box-shadow:inset 0 2rem 2rem -2rem var(--p-hint-from-direct-light), inset 0 -2rem 2rem -2rem var(--p-hint-from-direct-light); } .Polaris-Popover{ max-width:calc(100vw - 3.2rem); margin:0.5rem 0.8rem 1.6rem; box-shadow:var(--p-popover-shadow); border-radius:var(--p-border-radius-wide); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:left, top; } .Polaris-Popover__PopoverOverlay{ opacity:0; transition:opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 100ms cubic-bezier(0.25, 0.1, 0.25, 1); transform:translateY(-0.5rem); } .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:0ms; } .Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){ opacity:0; transform:translateY(-0.5rem); } .Polaris-Popover--fullWidth{ margin:0; margin-top:0.5rem; } .Polaris-Popover--fullWidth .Polaris-Popover__Content{ max-width:none; } .Polaris-Popover--positionedAbove{ margin:1.6rem 0.8rem 0.5rem; } .Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{ margin:0 0 0.5rem; } .Polaris-Popover__Wrapper{ position:relative; overflow:hidden; background-color:var(--p-surface); border-radius:var(--p-border-radius-wide); outline:1px solid transparent; } .Polaris-Popover__Content{ position:relative; display:flex; flex-direction:column; border-radius:var(--p-border-radius-base); max-width:40rem; max-height:50rem; } .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:0.1rem solid var(--p-divider); } .Polaris-Popover__Pane:focus{ outline:none; } .Polaris-Popover__Pane--fixed{ overflow:visible; flex:0 0 auto; } .Polaris-Popover__Section{ padding:1.6rem; } .Polaris-Popover__Section + .Polaris-Popover__Section{ border-top:0.1rem solid var(--p-divider); } .Polaris-Popover__FocusTracker{ position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; -webkit-clip-path:inset(50%) !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:400; } .Polaris-PositionedOverlay--fixed{ position:fixed; } .Polaris-PositionedOverlay--calculating{ visibility:hidden; } .Polaris-PositionedOverlay--preventInteraction{ pointer-events:none; } .Polaris-Badge{ --p-component-badge-pip-color:var(--p-icon); display:inline-flex; align-items:center; padding:0.2rem 0.8rem; background-color:var(--p-surface-neutral); border-radius:2rem; font-size:1.3rem; line-height:1.6rem; color:var(--p-text); font-weight:var(--p-badge-font-weight); } @media print{ .Polaris-Badge{ border:solid 0.01rem var(--p-border); } } .Polaris-Badge--sizeSmall{ font-size:1.2rem; } .Polaris-Badge--statusSuccess{ --p-component-badge-pip-color:var(--p-icon-success); background-color:var(--p-surface-success); color:var(--p-text); } .Polaris-Badge--statusInfo{ --p-component-badge-pip-color:var(--p-icon-highlight); background-color:var(--p-surface-highlight); color:var(--p-text); } .Polaris-Badge--statusAttention{ --p-component-badge-pip-color:var(--p-text-warning); background-color:var(--p-surface-warning); color:var(--p-text); } .Polaris-Badge--statusWarning{ --p-component-badge-pip-color:var(--p-icon-warning); background-color:var(--p-surface-warning); color:var(--p-text); } .Polaris-Badge--statusCritical{ --p-component-badge-pip-color:var(--p-icon-critical); background-color:var(--p-surface-critical); color:var(--p-text); } .Polaris-Badge--statusNew{ background-color:var(--p-surface-neutral); color:var(--p-text); font-weight:500; border:none; } .Polaris-Badge__Pip{ color:var(--p-component-badge-pip-color); height:0.8rem; width:0.8rem; margin-right:0.4rem; margin-left:-0.2rem; border:0.2rem solid currentColor; border-radius:50%; flex-shrink:0; } .Polaris-Badge--progressIncomplete .Polaris-Badge__Pip{ background:transparent; } .Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip{ background:linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent); } @media print{ .Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip{ background:none; box-shadow:0 -102px 0 -100px currentColor inset; } } .Polaris-Badge--progressComplete .Polaris-Badge__Pip{ background:currentColor; } @media print{ .Polaris-Badge--progressComplete .Polaris-Badge__Pip{ background:none; box-shadow:0 0 0 100px currentColor inset; } } .Polaris-Badge--withinFilter{ border-radius:var(--p-border-radius-base); } .Polaris-TextStyle--variationPositive{ color:var(--p-text-success); } .Polaris-TextStyle--variationNegative{ color:var(--p-text-critical); } .Polaris-TextStyle--variationCode{ position:relative; padding:0 0.4rem; border-radius:3px; background-color:var(--p-surface-subdued); display:inline-block; font-size:1.15em; box-shadow:inset 0 0 0 1px var(--p-border-subdued); } .Polaris-TextStyle--variationCode::after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid transparent; pointer-events:none; } .Polaris-TextStyle--variationStrong{ font-weight:600; } .Polaris-TextStyle--variationSubdued{ color:var(--p-text-subdued); } @media print{ .Polaris-TextStyle--variationSubdued{ color:var(--p-text-subdued); } } .Polaris-ActionList{ list-style:none; margin:0; padding:0; } .Polaris-ActionList__Section--withoutTitle:not(:first-child){ border-top:0.1rem solid var(--p-divider); } .Polaris-ActionList__Actions{ list-style:none; margin:0; border-top:0.1rem solid var(--p-divider); padding:0.8rem; } .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:1.3rem; font-weight:600; line-height:1.6rem; text-transform:uppercase; padding:0.4rem 1.6rem 1.2rem 1.6rem; } @media (min-width: 40em){ .Polaris-ActionList__Title{ font-size:1.2rem; } } .Polaris-ActionList__Title.Polaris-ActionList--firstSectionWithTitle{ padding-top:1.2rem; } .Polaris-ActionList__Item{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; color:inherit; text-decoration:none; position:relative; display:block; width:100%; min-height:4rem; text-align:left; cursor:pointer; padding:1rem 0.8rem; border-radius:var(--p-border-radius-base); border-top:1px solid transparent; } .Polaris-ActionList__Item:focus{ outline:none; } .Polaris-ActionList__Item:visited{ color:inherit; } .Polaris-ActionList__Item::after{ content:''; position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } @media (forced-colors: active){ .Polaris-ActionList__Item{ border:0.1rem solid transparent; } } .Polaris-ActionList__Item:hover{ background-color:var(--p-surface-hovered); text-decoration:none; outline:0.3rem solid transparent; } .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:-0.8rem; height:100%; display:block; width:0.3rem; border-top-right-radius:var(--p-border-radius-base); border-bottom-right-radius:var(--p-border-radius-base); } .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:0.3rem solid transparent; } .Polaris-ActionList__Item:focus:not(:active)::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .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:2rem; width:2rem; border-radius:3px; margin:-1rem 1.6rem -1rem 0; background-size:cover; background-position:center center; } .Polaris-ActionList__Prefix svg{ fill:var(--p-icon); } .Polaris-ActionList__Suffix{ margin-left:1.6rem; } .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{ position:relative; position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:3.6rem; min-width:3.6rem; margin:0; padding:0.7rem 1.6rem; background:var(--p-surface); box-shadow:var(--p-button-drop-shadow); border-radius:var(--p-border-radius-base); color:var(--p-text); border:1px 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:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button:hover{ background:var(--p-action-secondary-hovered); outline:0.1rem solid transparent; } .Polaris-Button:focus{ box-shadow:var(--p-button-drop-shadow); outline:0; } .Polaris-Button:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button:active{ background:var(--p-action-secondary-pressed); box-shadow:var(--p-button-drop-shadow); } .Polaris-Button:active::after{ border:none; box-shadow:none; } .Polaris-Button.Polaris-Button--pressed{ background:var(--p-action-secondary-depressed); box-shadow:var(--p-button-pressed-inner-shadow); 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:1px 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:10; 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:20; } .Polaris-Button__Content{ font-size:1.5rem; font-weight:var(--p-button-font-weight); line-height:1.6rem; text-transform:initial; letter-spacing:initial; position:relative; display:flex; justify-content:center; align-items:center; min-width:1px; min-height:1px; } @media (min-width: 40em){ .Polaris-Button__Content{ font-size:1.4rem; } } .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--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__Icon{ margin-left:-0.4rem; } .Polaris-Button__Icon:last-child{ margin-right:-0.8rem; margin-left:0.4rem; } .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:0.4rem; } .Polaris-Button--hidden{ visibility:hidden; } .Polaris-Button__Spinner{ position:absolute; top:50%; left:50%; margin-top:-1rem; margin-left:-1rem; } .Polaris-Button--primary, .Polaris-Button--destructive{ position:relative; background:var(--p-button-color); border-width:0; border-color:transparent; box-shadow:var(--p-button-drop-shadow), var(--p-button-inner-shadow); color:var(--p-button-text); } .Polaris-Button--primary::after, .Polaris-Button--destructive::after{ content:''; position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button--primary:hover, .Polaris-Button--destructive:hover{ background:var(--p-button-color-hover); border-color:transparent; color:var(--p-button-text); } .Polaris-Button--primary:focus, .Polaris-Button--destructive:focus{ border-color:transparent; box-shadow:var(--p-button-drop-shadow), var(--p-button-inner-shadow); } .Polaris-Button--primary:active, .Polaris-Button--destructive:active{ background:var(--p-button-color-active); border-color:transparent; box-shadow:var(--p-button-drop-shadow), var(--p-button-inner-shadow); } .Polaris-Button--primary.Polaris-Button--pressed, .Polaris-Button--destructive.Polaris-Button--pressed{ color:var(--p-button-text); background:var(--p-button-color-depressed); border-color:transparent; box-shadow:var(--p-button-drop-shadow), var(--p-button-inner-shadow); } .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(--p-button-color-depressed); box-shadow:var(--p-button-drop-shadow), var(--p-button-inner-shadow); } .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{ --p-button-color:var(--p-action-primary); --p-button-text:var(--p-text-on-primary); --p-button-color-hover:var(--p-action-primary-hovered); --p-button-color-active:var(--p-action-primary-pressed); --p-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{ --p-button-color:var(--p-action-critical); --p-button-text:var(--p-text-on-critical); --p-button-color-hover:var(--p-action-critical-hovered); --p-button-color-active:var(--p-action-critical-pressed); --p-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:0.1rem 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.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button--outline:hover{ border:0.1rem solid var(--p-border); box-shadow:none; background:var(--p-surface-hovered); } .Polaris-Button--outline:focus{ border:0.1rem solid var(--p-border); box-shadow:none; } .Polaris-Button--outline:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button--outline:active{ border:0.1rem 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:0.1rem solid var(--p-border); box-shadow:none; color:var(--p-button-text); } .Polaris-Button--outline.Polaris-Button--disabled{ border:0.1rem solid var(--p-border-disabled); box-shadow:none; background:transparent; color:var(--p-text-disabled); } .Polaris-Button--outline.Polaris-Button--destructive{ background:transparent; border:0.1rem 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:0.1rem solid var(--p-border-critical); background:var(--p-surface-critical-subdued); } .Polaris-Button--outline.Polaris-Button--destructive:focus{ border:0.1rem solid var(--p-border-critical); } .Polaris-Button--outline.Polaris-Button--destructive:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button--outline.Polaris-Button--destructive:active{ border:0.1rem solid var(--p-border-critical); background:var(--p-surface-critical-subdued); } .Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--disabled{ border:0.1rem solid var(--p-border-critical-disabled); background:transparent; color:var(--p-interactive-critical-disabled); } .Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--pressed{ background:var(--p-surface-critical-subdued); box-shadow:0.1rem solid var(--p-border-critical); 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:0.1rem 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.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button--destructive.Polaris-Button--outline:hover{ border:0.1rem solid var(--p-border); box-shadow:none; background:var(--p-surface-hovered); } .Polaris-Button--destructive.Polaris-Button--outline:focus{ border:0.1rem solid var(--p-border); box-shadow:none; } .Polaris-Button--destructive.Polaris-Button--outline:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button--destructive.Polaris-Button--outline:active{ border:0.1rem 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:0.1rem solid var(--p-border); box-shadow:none; color:var(--p-button-text); } .Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--disabled{ border:0.1rem 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:0.1rem 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:0.1rem solid var(--p-border-critical); background:var(--p-surface-critical-subdued); } .Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:focus{ border:0.1rem solid var(--p-border-critical); } .Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive:active{ border:0.1rem solid var(--p-border-critical); background:var(--p-surface-critical-subdued); } .Polaris-Button--destructive.Polaris-Button--outline.Polaris-Button--destructive.Polaris-Button--disabled{ border:0.1rem 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{ background:var(--p-surface-critical-subdued); box-shadow:0.1rem solid var(--p-border-critical); color:var(--p-interactive-critical); } .Polaris-Button--disabled{ cursor:default; pointer-events:none; } @keyframes Polaris-Button--loading{ to{ transform:rotate(360deg); } } .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:-0.7rem -0.8rem; padding-left:0.8rem; padding-right:0.8rem; 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:400; position:relative; } .Polaris-Button--plain > .Polaris-Button__Content::after{ content:''; position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button--plain:hover, .Polaris-Button--plain:focus{ color:var(--p-interactive-hovered); background:transparent; box-shadow:none; } .Polaris-Button--plain:hover svg, .Polaris-Button--plain:focus svg{ fill:var(--p-interactive-hovered); } .Polaris-Button--plain:hover:not(.Polaris-Button--removeUnderline), .Polaris-Button--plain:focus: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:2px dotted; } } .Polaris-Button--plain:focus:not(:active) > .Polaris-Button__Content::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem 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:2px 5px; margin:-2px -5px; background:var(--p-action-secondary-hovered); border-radius:3px; } .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:-0.3rem; margin-bottom:-0.3rem; } .Polaris-Button--plain.Polaris-Button--sizeLarge{ margin:-1.1rem -2rem; } .Polaris-Button--plain.Polaris-Button--iconOnly{ margin:-0.8rem; } .Polaris-Button--plain.Polaris-Button--iconOnly svg{ fill:var(--p-icon); } .Polaris-Button--plain.Polaris-Button--iconOnly:hover svg{ fill:var(--p-icon-hovered); } .Polaris-Button--plain.Polaris-Button--iconOnly:active svg, .Polaris-Button--plain.Polaris-Button--iconOnly.Polaris-Button--pressed svg{ fill:var(--p-icon-pressed); } .Polaris-Button--plain.Polaris-Button--iconOnly.Polaris-Button--disabled svg{ fill:var(--p-icon-disabled); } .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--iconOnly svg{ fill:var(--p-action-critical); } .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--iconOnly:hover svg{ fill:var(--p-action-critical-hovered); } .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--iconOnly:active svg, .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--iconOnly.Polaris-Button--pressed svg{ fill:var(--p-action-critical-pressed); } .Polaris-Button--plain.Polaris-Button--destructive.Polaris-Button--iconOnly.Polaris-Button--disabled svg{ fill:var(--p-action-critical-disabled); } .Polaris-Button--plain .Polaris-Button__Icon{ margin-left:0; margin-right:0; } .Polaris-Button--fullWidth{ display:flex; width:100%; } .Polaris-Button--iconOnly{ padding-left:0.8rem; padding-right:0.8rem; } .Polaris-Button--iconOnly.Polaris-Button--sizeLarge{ padding-left:1.2rem; padding-right:1.2rem; } .Polaris-Button--iconOnly .Polaris-Button__Icon:first-child{ margin-left:0; } .Polaris-Button--iconOnly .Polaris-Button__Icon:last-child{ margin-right:-0.4rem; } .Polaris-Button--iconOnly .Polaris-Button__Icon:only-child{ margin-right:0; } .Polaris-Button--sizeSlim{ min-height:2.8rem; padding:0.3rem 1.2rem; } .Polaris-Button--sizeLarge{ min-height:4.4rem; min-width:4.4rem; padding:1.1rem 2.4rem; } .Polaris-Button--sizeLarge .Polaris-Button__Content{ font-size:1.7rem; font-weight:var(--p-button-font-weight); line-height:2rem; text-transform:initial; letter-spacing:initial; } @media (min-width: 40em){ .Polaris-Button--sizeLarge .Polaris-Button__Content{ font-size:1.6rem; } } .Polaris-Button--monochrome.Polaris-Button--outline, .Polaris-Button--monochrome.Polaris-Button--plain{ color:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline svg, .Polaris-Button--monochrome.Polaris-Button--plain svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline:hover, .Polaris-Button--monochrome.Polaris-Button--outline:focus, .Polaris-Button--monochrome.Polaris-Button--outline:active, .Polaris-Button--monochrome.Polaris-Button--plain:hover, .Polaris-Button--monochrome.Polaris-Button--plain:focus, .Polaris-Button--monochrome.Polaris-Button--plain:active{ color:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline:hover svg, .Polaris-Button--monochrome.Polaris-Button--outline:focus svg, .Polaris-Button--monochrome.Polaris-Button--outline:active svg, .Polaris-Button--monochrome.Polaris-Button--plain:hover svg, .Polaris-Button--monochrome.Polaris-Button--plain:focus svg, .Polaris-Button--monochrome.Polaris-Button--plain:active svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--disabled, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--disabled{ color:currentColor; opacity:0.4; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--disabled svg, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--disabled svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--iconOnly svg, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--iconOnly svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--iconOnly:focus svg, .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--iconOnly:active svg, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--iconOnly:focus svg, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--iconOnly:active svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--iconOnly.Polaris-Button--disabled svg, .Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--iconOnly.Polaris-Button--disabled svg{ fill:currentColor; } .Polaris-Button--monochrome.Polaris-Button--plain .Polaris-Button__Text:not(.Polaris-Button--removeUnderline){ text-decoration:underline; } .Polaris-Button--monochrome.Polaris-Button--outline{ position:relative; border-color:currentColor; box-shadow:0 0 0 0.1rem currentColor; position:relative; } .Polaris-Button--monochrome.Polaris-Button--outline::after{ content:''; position:absolute; z-index:1; top:-0.3rem; right:-0.3rem; bottom:-0.3rem; left:-0.3rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.3rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); } .Polaris-Button--monochrome.Polaris-Button--outline::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:currentColor; opacity:0; z-index:0; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--pressed{ background:transparent; box-shadow:none; color:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline.Polaris-Button--pressed::before{ opacity:0.2; } .Polaris-Button--monochrome.Polaris-Button--outline:hover, .Polaris-Button--monochrome.Polaris-Button--outline:focus, .Polaris-Button--monochrome.Polaris-Button--outline:active{ background-color:transparent; border-color:currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline:hover::before, .Polaris-Button--monochrome.Polaris-Button--outline:focus::before, .Polaris-Button--monochrome.Polaris-Button--outline:active::before{ opacity:0.07; } .Polaris-Button--monochrome.Polaris-Button--outline:focus{ box-shadow:0 0 0 1px currentColor; } .Polaris-Button--monochrome.Polaris-Button--outline:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; } .Polaris-Button--monochrome.Polaris-Button--outline:active::after{ box-shadow:none; } .Polaris-Button--monochrome.Polaris-Button--outline:hover::before, .Polaris-Button--monochrome.Polaris-Button--outline:active::before{ opacity:0.05; } .Polaris-Button__ConnectedDisclosureWrapper{ display:flex; } .Polaris-Button__ConnectedDisclosure{ z-index:10; margin-left:-0.1rem; border-top-left-radius:0; border-bottom-left-radius:0; height:100%; } .Polaris-Button__ConnectedDisclosure.Polaris-Button--outline:not(:focus){ border-left-color:rgba(210, 213, 216, 0); } .Polaris-Button__ConnectedDisclosure:focus, .Polaris-Button__ConnectedDisclosure:active{ z-index:20; } .Polaris-Button__ConnectedDisclosure.Polaris-Button--primary, .Polaris-Button__ConnectedDisclosure.Polaris-Button--destructive{ margin-left:0.1rem; } .Polaris-Button__ConnectedDisclosure.Polaris-Button--primary.Polaris-Button--outline, .Polaris-Button__ConnectedDisclosure.Polaris-Button--destructive.Polaris-Button--outline{ margin-left:0; border-left:0; } .Polaris-Button__ConnectedDisclosure::after{ border-top-left-radius:0; border-bottom-left-radius:0; } [data-buttongroup-segmented='true'] .Polaris-Button, [data-buttongroup-segmented='true'] .Polaris-Button::after{ border-radius:0; } [data-buttongroup-segmented='true'] > :first-child .Polaris-Button, [data-buttongroup-segmented='true'] > :first-child .Polaris-Button::after{ border-radius:0; border-top-left-radius:var(--p-border-radius-base); border-bottom-left-radius:var(--p-border-radius-base); } [data-buttongroup-segmented='true'] > :last-child .Polaris-Button, [data-buttongroup-segmented='true'] > :last-child .Polaris-Button::after{ border-radius:0; border-top-right-radius:var(--p-border-radius-base); border-bottom-right-radius:var(--p-border-radius-base); } [data-buttongroup-segmented='true'] > :last-child:first-child .Polaris-Button, [data-buttongroup-segmented='true'] > :last-child:first-child .Polaris-Button::after{ border-radius:var(--p-border-radius-base); } [data-buttongroup-connected-top='true'] > :first-child .Polaris-Button, [data-buttongroup-connected-top='true'] > :first-child .Polaris-Button::after{ border-top-left-radius:0; } [data-buttongroup-connected-top='true'] > :last-child .Polaris-Button, [data-buttongroup-connected-top='true'] > :last-child .Polaris-Button::after{ border-top-right-radius:0; } [data-buttongroup-full-width='true'] .Polaris-Button{ display:flex; width:100%; } .Polaris-ButtonGroup{ display:flex; flex-wrap:wrap; align-items:center; margin-top:-0.8rem; margin-left:-0.8rem; } .Polaris-ButtonGroup__Item{ margin-top:0.8rem; margin-left:0.8rem; } .Polaris-ButtonGroup__Item--plain:not(:first-child){ margin-left:1.6rem; } .Polaris-ButtonGroup__Item--plain:not(:last-child){ margin-right:0.8rem; } .Polaris-ButtonGroup--segmented{ display:flex; flex-wrap:nowrap; margin-top:0; margin-left:0; } .Polaris-ButtonGroup--segmented .Polaris-ButtonGroup__Item{ position:relative; z-index:10; margin-top:0; margin-left:0; } .Polaris-ButtonGroup--segmented .Polaris-ButtonGroup__Item:not(:first-child){ margin-left:-0.1rem; } .Polaris-ButtonGroup--segmented .Polaris-ButtonGroup__Item--focused{ z-index:20; } .Polaris-ButtonGroup--fullWidth .Polaris-ButtonGroup__Item{ flex:1 1 auto; } .Polaris-ButtonGroup--extraTight{ margin-top:-0.4rem; margin-left:-0.4rem; } .Polaris-ButtonGroup--extraTight .Polaris-ButtonGroup__Item{ margin-top:0.4rem; margin-left:0.4rem; } .Polaris-ButtonGroup--tight{ margin-top:-0.8rem; margin-left:-0.8rem; } .Polaris-ButtonGroup--tight .Polaris-ButtonGroup__Item{ margin-top:0.8rem; margin-left:0.8rem; } .Polaris-ButtonGroup--loose{ margin-top:-2rem; margin-left:-2rem; } .Polaris-ButtonGroup--loose .Polaris-ButtonGroup__Item{ margin-top:2rem; margin-left:2rem; } .Polaris-Stack{ margin-top:-1.6rem; margin-left:-1.6rem; display:flex; flex-wrap:wrap; align-items:stretch; } .Polaris-Stack > .Polaris-Stack__Item{ margin-top:1.6rem; margin-left:1.6rem; max-width:100%; } .Polaris-Stack--noWrap{ flex-wrap:nowrap; } .Polaris-Stack--spacingNone{ margin-top:0; margin-left:0; } .Polaris-Stack--spacingNone > .Polaris-Stack__Item{ margin-top:0; margin-left:0; max-width:100%; } .Polaris-Stack--spacingExtraTight{ margin-top:-0.4rem; margin-left:-0.4rem; } .Polaris-Stack--spacingExtraTight > .Polaris-Stack__Item{ margin-top:0.4rem; margin-left:0.4rem; max-width:100%; } .Polaris-Stack--spacingTight{ margin-top:-0.8rem; margin-left:-0.8rem; } .Polaris-Stack--spacingTight > .Polaris-Stack__Item{ margin-top:0.8rem; margin-left:0.8rem; max-width:100%; } .Polaris-Stack--spacingBaseTight{ margin-top:-1.2rem; margin-left:-1.2rem; } .Polaris-Stack--spacingBaseTight > .Polaris-Stack__Item{ margin-top:1.2rem; margin-left:1.2rem; max-width:100%; } .Polaris-Stack--spacingLoose{ margin-top:-2rem; margin-left:-2rem; } .Polaris-Stack--spacingLoose > .Polaris-Stack__Item{ margin-top:2rem; margin-left:2rem; max-width:100%; } .Polaris-Stack--spacingExtraLoose{ margin-top:-3.2rem; margin-left:-3.2rem; } .Polaris-Stack--spacingExtraLoose > .Polaris-Stack__Item{ margin-top:3.2rem; margin-left:3.2rem; max-width:100%; } .Polaris-Stack--distributionLeading{ justify-content:flex-start; } .Polaris-Stack--distributionTrailing{ justify-content:flex-end; } .Polaris-Stack--distributionCenter{ justify-content:center; } .Polaris-Stack--distributionEqualSpacing{ justify-content:space-between; } .Polaris-Stack--distributionFill > .Polaris-Stack__Item{ flex:1 1 auto; } .Polaris-Stack--distributionFillEvenly > .Polaris-Stack__Item{ flex:1 1 auto; } @supports ((min-width: -webkit-fit-content) or (min-width: -moz-fit-content) or (min-width: fit-content)){ .Polaris-Stack--distributionFillEvenly > .Polaris-Stack__Item{ flex:1 0; min-width:-webkit-fit-content; min-width:-moz-fit-content; min-width:fit-content; } } .Polaris-Stack--alignmentLeading{ align-items:flex-start; } .Polaris-Stack--alignmentTrailing{ align-items:flex-end; } .Polaris-Stack--alignmentCenter{ align-items:center; } .Polaris-Stack--alignmentFill{ align-items:stretch; } .Polaris-Stack--alignmentBaseline{ align-items:baseline; } .Polaris-Stack--vertical{ flex-direction:column; margin-left:0; } .Polaris-Stack--vertical > .Polaris-Stack__Item{ margin-left:0; } .Polaris-Stack__Item{ flex:0 0 auto; min-width:0; } .Polaris-Stack__Item--fill{ flex:1 1 auto; } .Polaris-Heading{ font-size:1.7rem; font-weight:600; line-height:2.4rem; margin:0; } @media (min-width: 40em){ .Polaris-Heading{ font-size:1.6rem; } } @media print{ .Polaris-Heading{ font-size:1.4rem; line-height:1.8rem; } } .Polaris-Card{ background-color:var(--p-surface); box-shadow:var(--p-card-shadow); outline:0.1rem solid transparent; } .Polaris-Card + .Polaris-Card{ margin-top:1.6rem; } @media print{ .Polaris-Card + .Polaris-Card{ margin-top:-0.8rem; } } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card{ border-radius:var(--p-border-radius-wide); } } @media (min-width: 30.625em){ .Polaris-Card{ border-radius:var(--p-border-radius-wide); } } @media print{ .Polaris-Card{ box-shadow:none; } } .Polaris-Card--subdued{ background-color:var(--p-surface-subdued); } @media print{ .Polaris-Card__Section--hideOnPrint, .Polaris-Card--hideOnPrint{ display:none !important; } } .Polaris-Card__Header{ padding:1.6rem 1.6rem 0; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Header{ padding:2rem 2rem 0; } } @media (min-width: 30.625em){ .Polaris-Card__Header{ padding:2rem 2rem 0; } } @media print and (max-width: 48.0625em) and (min-width: 30.625em), print and (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Header{ padding:0.8rem 1.6rem 0; } } @media print and (min-width: 30.625em){ .Polaris-Card__Header{ padding:0.8rem 1.6rem 0; } } .Polaris-Card__Section{ padding:1.6rem; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Section{ padding:2rem; } } @media (min-width: 30.625em){ .Polaris-Card__Section{ padding:2rem; } } .Polaris-Card__Section + .Polaris-Card__Section{ border-top:0.1rem solid var(--p-divider); } @media print{ .Polaris-Card__Section + .Polaris-Card__Section{ border-top:0; } } @media print{ .Polaris-Card__Section{ padding-top:0.4rem; padding-bottom:0.4rem; } } .Polaris-Card__Section:first-child{ border-top-left-radius:var(--p-border-radius-wide); border-top-right-radius:var(--p-border-radius-wide); } .Polaris-Card__Section:last-child{ border-bottom-left-radius:var(--p-border-radius-wide); border-bottom-right-radius:var(--p-border-radius-wide); } .Polaris-Card__Section--fullWidth{ padding:1.6rem 0; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Section--fullWidth{ padding:2rem 0; } } @media (min-width: 30.625em){ .Polaris-Card__Section--fullWidth{ padding:2rem 0; } } .Polaris-Card__Section--flush{ padding:0; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Section--flush{ padding:0; } } @media (min-width: 30.625em){ .Polaris-Card__Section--flush{ padding:0; } } .Polaris-Card__Section--subdued{ background-color:var(--p-surface-subdued); } @media (-ms-high-contrast: active){ .Polaris-Card__Section--subdued{ background-color:transparent; } } .Polaris-Card__Header + .Polaris-Card__Section--subdued{ border-top:0.1rem solid var(--p-divider); margin-top:2rem; } .Polaris-Card__SectionHeader{ padding-bottom:0.8rem; } .Polaris-Card__Section--fullWidth .Polaris-Card__SectionHeader{ padding-left:1.6rem; padding-right:1.6rem; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Section--fullWidth .Polaris-Card__SectionHeader{ padding-left:2rem; padding-right:2rem; } } @media (min-width: 30.625em){ .Polaris-Card__Section--fullWidth .Polaris-Card__SectionHeader{ padding-left:2rem; padding-right:2rem; } } .Polaris-Card__Subsection + .Polaris-Card__Subsection{ margin-top:1.6rem; padding-top:1.6rem; border-top:0.1rem solid var(--p-divider); } @media print{ .Polaris-Card__Subsection + .Polaris-Card__Subsection{ border-top:0; } } @media print{ .Polaris-Card__Subsection{ padding-top:0.4rem; padding-bottom:0.4rem; } } .Polaris-Card__Footer{ display:flex; justify-content:flex-end; padding:0 1.6rem 1.6rem; } @media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-Card__Footer{ padding:0 2rem 2rem; } } @media (min-width: 30.625em){ .Polaris-Card__Footer{ padding:0 2rem 2rem; } } .Polaris-Card__Footer.Polaris-Card__LeftJustified{ justify-content:flex-start; } .Polaris-Card__Section--subdued + .Polaris-Card__Footer{ border-top:0.1rem solid var(--p-divider); padding:2rem; } .Polaris-Subheading{ font-size:1.3rem; font-weight:600; line-height:1.6rem; text-transform:uppercase; margin:0; } @media (min-width: 40em){ .Polaris-Subheading{ font-size:1.2rem; } } @media print{ .Polaris-Subheading{ font-size:1.1rem; } } .Polaris-SettingAction{ display:flex; flex-wrap:wrap; align-items:center; margin-top:-1.6rem; margin-left:-1.6rem; } .Polaris-SettingAction__Setting, .Polaris-SettingAction__Action{ flex:0 0 auto; margin-top:1.6rem; margin-left:1.6rem; max-width:calc(100% - 1.6rem); min-width:0; } .Polaris-SettingAction__Setting{ flex:1 0 35rem; } .Polaris-AccountConnection__TermsOfService{ margin-top:2rem; } .Polaris-AccountConnection__Content > * + *{ margin-top:0.8rem; } .Polaris-ActionMenu-SecondaryAction a, .Polaris-ActionMenu-SecondaryAction button{ position:relative; background:transparent !important; box-shadow:none !important; border-radius:var(--p-border-radius-base) !important; padding-left:1.2rem; padding-right:1.2rem; } .Polaris-ActionMenu-SecondaryAction a::after, .Polaris-ActionMenu-SecondaryAction button::after{ content:''; position:absolute; z-index:1; top:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; dis