@shopify/polaris/dist/esnext/components/CheckableButton/CheckableButton.css

Shopify’s product component library

.Polaris-CheckableButton_1a7z5{ font-size:1.5rem; font-weight:var(--p-button-font-weight, 400); line-height:1.6rem; text-transform:initial; letter-spacing:initial; display:flex; align-items:center; min-height:3.6rem; min-width:3.6rem; margin:0; padding:0.7rem 1.6rem; line-height:1; cursor:pointer; -webkit-user-select:none; user-select:none; text-decoration:none; text-align:left; background:transparent; border:var(--p-override-none, 0.1rem solid var(--p-border, #c4cdd5)); border-radius:var(--p-border-radius-base, 3px); width:100%; box-shadow:var(--p-override-none, 0 1px 0 0 rgba(22, 29, 37, 0.05)); }

@media (min-width: 40em){ .Polaris-CheckableButton_1a7z5{ font-size:1.4rem; } }

[data-buttongroup-segmented='true'] .Polaris-CheckableButton_1a7z5{ border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8{ background:var(--p-surface); box-shadow:var(--p-button-drop-shadow); border:1px solid var(--p-border-neutral-subdued); border-top-color:var(--p-border-subdued); border-bottom-color:var(--p-border-shadow-subdued); }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-on-interactive); }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8:hover{ background:var(--p-action-secondary-hovered); }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8:active{ background:var(--p-action-secondary-pressed); }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8.Polaris-CheckableButton__CheckableButton--selectMode_1hja7{ font-weight:500; }

@media (-ms-high-contrast: active){ .Polaris-CheckableButton_1a7z5.Polaris-CheckableButton--newDesignLanguage_1rik8{ border:0.1rem solid; } }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--measuring_bwpnw{ font-size:1.5rem; font-weight:700; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--measuring_bwpnw::before{ content:''; display:inline-block; width:1.5rem; }

@media (min-width: 28.625em){ .Polaris-CheckableButton_1a7z5{ flex:0 1 auto; } }

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

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--plain_vhvci{ border:0.1rem solid transparent; border-radius:3px; box-shadow:none; background:transparent; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--plain_vhvci.Polaris-CheckableButton--newDesignLanguage_1rik8{ border:none; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--plain_vhvci:hover{ background:transparent; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--selectMode_1hja7{ color:var(--p-text-subdued, #637381); font-weight:600; }

.Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--selected_1xi7t{ color:var(--p-text, #5c6ac4); }

@media (min-width: 28.625em){ .Polaris-CheckableButton_1a7z5.Polaris-CheckableButton__CheckableButton--selected_1xi7t:not(.Polaris-CheckableButton--newDesignLanguage_1rik8){ border-color:#c4cdd5; } }

.Polaris-CheckableButton__Checkbox_1d6zr{ pointer-events:none; height:1.6rem; width:1.6rem; margin-left:-0.9rem; }

.Polaris-CheckableButton--newDesignLanguage_1rik8 .Polaris-CheckableButton__Checkbox_1d6zr{ height:var(--p-choice-size); width:var(--p-choice-size); margin-left:calc(-0.9rem - var(--p-control-border-width)); }

.Polaris-CheckableButton__Label_2vd36{ margin-left:2rem; flex:1 1; white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; padding:0.1rem 0; }

.Polaris-CheckableButton--newDesignLanguage_1rik8 .Polaris-CheckableButton__Label_2vd36{ margin-left:calc(2rem - var(--p-control-border-width)); }