[data-scope="radio-group"][data-part="item-control"][data-focus-visible] {
  outline: 2px solid royalblue;
}

[data-scope="radio-group"][data-part="radio-label"][data-disabled] {
  opacity: 0.4;
}

[data-scope="radio-group"][data-part="root"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-scope="radio-group"][data-part="item"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

[data-scope="radio-group"][data-part="item"][data-disabled] {
  cursor: not-allowed;
}

[data-scope="radio-group"][data-part="item-control"] {
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: solid 2px grey;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-scope="radio-group"][data-part="item-control"][data-hover] {
  background-color: #ccc;
}

[data-scope="radio-group"][data-part="item-control"][data-state="checked"] {
  background-color: #2196f3;
  border-color: #2196f3;
}

[data-scope="radio-group"][data-part="item-control"][data-state="checked"]::after {
  display: initial;
}

[data-scope="radio-group"][data-part="item-control"]::after {
  content: "";
  display: none;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: relative;
  top: -1px;
}

[data-scope="radio-group"][data-part="indicator"] {
  height: 4px;
  background-color: red;
  z-index: 1;
  border-radius: 0.25rem;
  box-shadow:
    rgba(0, 0, 0, 0.05) 0px 0.0625rem 0.1875rem,
    rgba(0, 0, 0, 0.1) 0px 0.0625rem 0.125rem;
  background-color: rgb(255, 255, 255);
}

[data-scope="radio-group"][data-part="item"] {
  &[data-state="checked"][data-ssr] {
    border-radius: 0.25rem;
    box-shadow:
      rgba(0, 0, 0, 0.05) 0px 0.0625rem 0.1875rem,
      rgba(0, 0, 0, 0.1) 0px 0.0625rem 0.125rem;
    background-color: rgb(255, 255, 255);
  }
}
