@shopify/polaris/build/esnext/components/RadioButton/RadioButton.out.css

Shopify’s admin product component library

.Polaris-RadioButton_bsatr{
  position:relative;
  margin:var(--p-space-025);
}

.Polaris-RadioButton__Input_30ock{
  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-RadioButton__Input_30ock:focus-visible + .Polaris-RadioButton__Backdrop_1x2i2{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-RadioButton__Input_30ock:focus-visible + .Polaris-RadioButton__Backdrop_1x2i2::after{
      border-radius:var(--p-border-radius-full);
    }

.Polaris-RadioButton__Input_30ock:checked + .Polaris-RadioButton__Backdrop_1x2i2,
    
    
    
    
    .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:checked + .Polaris-RadioButton__Backdrop_1x2i2{
      border-color:var(--p-color-border-emphasis);
    }

.Polaris-RadioButton__Input_30ock:checked + .Polaris-RadioButton__Backdrop_1x2i2::before, .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:checked + .Polaris-RadioButton__Backdrop_1x2i2::before{
        background-color:var(--p-color-text-brand-on-bg-fill);
        transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out);
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
      }

.Polaris-RadioButton__Input_30ock:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2,
    .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2{
      background-color:var(--p-color-bg-fill-brand-selected);
      border-color:var(--p-color-bg-fill-brand-selected);
    }

.Polaris-RadioButton__Input_30ock.Polaris-RadioButton--toneMagic_tqodm:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2,
    .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock.Polaris-RadioButton--toneMagic_tqodm:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2{
      background-color:var(--p-color-bg-fill-magic);
      border-color:var(--p-color-bg-fill-magic);
    }

.Polaris-RadioButton__Input_30ock.Polaris-RadioButton--toneMagic_tqodm:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2::before,
      .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock.Polaris-RadioButton--toneMagic_tqodm:checked:not([disabled]) + .Polaris-RadioButton__Backdrop_1x2i2::before{
        background-color:var(--p-color-text-magic-on-bg-fill);
      }

.Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock + .Polaris-RadioButton__Backdrop_1x2i2{
      cursor:pointer;
      border-color:var(--p-color-input-border-hover);
      background:var(--p-color-input-bg-surface-hover);
    }

.Polaris-RadioButton__ChoiceLabel_16hp3:active .Polaris-RadioButton__Input_30ock + .Polaris-RadioButton__Backdrop_1x2i2{
      border-color:var(--p-color-bg-fill-brand);
      border-width:var(--p-border-width-050);
    }

.Polaris-RadioButton__Input_30ock:disabled + .Polaris-RadioButton__Backdrop_1x2i2,
    .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:disabled + .Polaris-RadioButton__Backdrop_1x2i2{
      cursor:default;
      background-color:var(--p-color-radio-button-bg-surface-disabled);
      border:none;
    }

.Polaris-RadioButton__Input_30ock:disabled + .Polaris-RadioButton__Backdrop_1x2i2::before, .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:disabled + .Polaris-RadioButton__Backdrop_1x2i2::before{
        background-color:var(--p-color-border-disabled);
      }

.Polaris-RadioButton__Input_30ock:disabled:checked + .Polaris-RadioButton__Backdrop_1x2i2::before,
    .Polaris-RadioButton__ChoiceLabel_16hp3:hover .Polaris-RadioButton__Input_30ock:disabled:checked + .Polaris-RadioButton__Backdrop_1x2i2::before{
      background-color:var(--p-color-radio-button-icon-disabled);
    }

.Polaris-RadioButton__Backdrop_1x2i2{
  --pc-icon-size-small:0.5rem;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  border:var(--p-border-width-0165) solid var(--p-color-input-border);
  border-radius:var(--p-border-radius-full);
  background-color:var(--p-color-input-bg-surface);
  transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
}

@media (max-width: 47.9975em){

.Polaris-RadioButton__Backdrop_1x2i2{
    --pc-icon-size-small:0.625rem;
}
  }

.Polaris-RadioButton__Backdrop_1x2i2::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    opacity:0;
    transform:translate(-50%, -50%) scale(0.1);
    transform-origin:50% 50%;
    height:var(--pc-icon-size-small);
    width:var(--pc-icon-size-small);
    background-color:var(--p-color-bg-fill-brand);
    border-radius:var(--p-border-radius-full);
    transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);
  }

@media (forced-colors: active){

.Polaris-RadioButton__Backdrop_1x2i2::before{
      border:var(--p-border-width-100) solid transparent;
  }
    }

.Polaris-RadioButton__Backdrop_1x2i2{
  position: relative;
}

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

.Polaris-RadioButton__Backdrop_1x2i2::after{
    border-radius:var(--p-border-radius-full);
  }