@gravity-ui/uikit/build/cjs/components/Radio/Radio.css

Gravity UI base styling and components

@charset "UTF-8";
.g-radio__indicator {
  display: inline-block;
  position: relative;
  cursor: inherit;
}
.g-radio__indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  border: 1px solid var(--g-color-line-generic-accent);
  border-radius: 50%;
  transition: background 0.1s linear;
}
.g-radio__indicator::after {
  content: " ";
  visibility: hidden;
}
.g-radio__disc::before {
  content: "";
  position: absolute;
  border: none;
  background-color: var(--g-color-text-brand-contrast);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.1);
  transition: opacity 0.1s, transform 0.2s;
}
.g-radio__control {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: none;
  border: none;
  outline: none;
  cursor: inherit;
}
.g-radio__outline {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background: none;
  pointer-events: none;
  border-radius: 50%;
}
.g-radio__control:focus-visible + .g-radio__outline {
  outline: 2px solid var(--g-color-line-focus);
}
.g-radio_size_m .g-radio__indicator {
  width: 14px;
  height: 14px;
}
.g-radio_size_m .g-radio__disc::before {
  inset: 5px;
}
.g-radio_size_l .g-radio__indicator {
  width: 17px;
  height: 17px;
}
.g-radio_size_l .g-radio__disc::before {
  inset: 6px;
}
.g-radio_size_xl .g-radio__indicator {
  width: 24px;
  height: 24px;
}
.g-radio_size_xl .g-radio__disc::before {
  inset: 8px;
}
.g-radio:hover .g-radio__indicator::before {
  border-color: var(--g-color-line-generic-accent-hover);
}
.g-radio_checked .g-radio__indicator::before {
  background-color: var(--g-color-base-brand);
  border: transparent;
}
.g-radio_checked .g-radio__indicator .g-radio__disc::before {
  opacity: 1;
  transform: scale(1);
}
.g-radio_disabled .g-radio__indicator::before {
  background-color: var(--g-color-base-generic-accent-disabled);
  border: transparent;
}
.g-radio_disabled.g-radio_checked .g-radio__disc::before {
  background-color: var(--g-color-text-hint);
}