.Polaris-CheckableButton_1a7z5 { color: var(--p-color-text); font-size: var(--p-font-size-75); font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-1); letter-spacing: initial; display: flex; align-items: center; min-height: 2.25rem; min-width: 2.25rem; margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; text-align: left; border-radius: var(--p-border-radius-1); width: auto; }

html[class~="Polaris-Summer-Editions-2023"] .Polaris-CheckableButton_1a7z5 { min-height: auto; min-width: auto; height: 100%; }

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

.Polaris-CheckableButton_1a7z5:hover, .Polaris-CheckableButton_1a7z5:active { background: transparent; }

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

.Polaris-CheckableButton__Checkbox_1d6zr { pointer-events: none; /* We do not want to worry about setting the height and width explicitly. We want to inherits the height and width of its child (in this case the Checkbox component). We do this using flexbox because "the cross size of each flex container is the minimum size necessary to contain the flex items" as per the spec. https://www.w3.org/TR/css-flexbox-1/#flex-lines */ display: flex; }

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

html[class~="Polaris-Summer-Editions-2023"] .Polaris-CheckableButton__Label_2vd36 { margin-left: calc(var(--p-space-3) + var(--p-space-025)); line-height: 1.125rem; }