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

Shopify’s admin product component library

.Polaris-CheckableButton_1a7z5 { font-size: 0.9375rem; font-weight: var(--p-button-font-weight); line-height: 1rem; text-transform: initial; letter-spacing: initial; display: flex; align-items: center; min-height: 2.25rem; min-width: 2.25rem; margin: 0; padding: 0.4375rem 1rem; line-height: 1; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; text-align: left; border-radius: var(--p-border-radius-base); width: 100%; background: var(--p-surface); box-shadow: var(--p-button-drop-shadow); border: 0.0625rem solid var(--p-border-neutral-subdued); border-top-color: var(--p-border-subdued); border-bottom-color: var(--p-border-shadow-subdued); }

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

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

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

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

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

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

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

@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-radius: 0.1875rem; box-shadow: none; background: transparent; 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); font-weight: 500; }

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

.Polaris-CheckableButton__Checkbox_1d6zr { pointer-events: none; height: var(--p-choice-size); width: var(--p-choice-size); margin-left: calc(-0.5625rem - var(--p-control-border-width)); }

.Polaris-CheckableButton__Label_2vd36 { flex: 1 1; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; padding: 0.0625rem 0; margin-left: calc(1.25rem - var(--p-control-border-width)); }