/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--form-radiobutton--border-color: var(--digi--color--border--interactive--default--on-input);
  --digi--form-radiobutton--border-color--primary: var(--digi--color--border--interactive--selected--primary);
  --digi--form-radiobutton--border-color--secondary: var(--digi--color--border--interactive--selected--secondary);
  --digi--form-radiobutton--border-color--error: var(--digi--color--border--interactive--validation--error);
  --digi--form-radiobutton--box-shadow--error: var(--digi--color--border--interactive--validation--error);
  --digi--form-radiobutton--background-color: var(--digi--color--background--interactive--default--input-elements);
  --digi--form-radiobutton--background-color--primary: var(--digi--color--background--interactive--selected--primary);
  --digi--form-radiobutton--background-color--secondary: var(--digi--color--background--interactive--selected--secondary);
  --digi--form-radiobutton--background-color--error: var(--digi--color--background--interactive--validation--error);
  --digi--form-radiobutton--border-width: var(--digi--border-width--primary);
  --digi--form-radiobutton--color--marker: var(--digi--grayscale--0);
  --digi--form-radiobutton--size: 1.25rem;
  --digi--form-radiobutton--marker--size: calc(var(--digi--typography--input--font-size--desktop-large) * 0.4);
  --digi--form-radiobutton--height: var(--digi--input-height--large);
  --digi--form-radiobutton--border-radius: var(--digi--border-radius--primary);
  --digi--form-radiobutton--padding: var(--digi--gutter--icon);
  --digi--form-radiobutton--padding--block: var(--digi--gutter--small);
  --digi--form-radiobutton--padding--inline: var(--digi--gutter--icon);
}
:host .digi-form-radiobutton {
  --BACKGROUND--DEFAULT: var(--digi--form-radiobutton--background-color);
  --BORDER-COLOR--DEFAULT: var(--digi--form-radiobutton--border-color);
  position: relative;
}
:host .digi-form-radiobutton--primary {
  --BACKGROUND--CHECKED: var(--digi--form-radiobutton--background-color--primary);
  --BORDER-COLOR--CHECKED: var(--digi--form-radiobutton--border-color--primary);
}
:host .digi-form-radiobutton--secondary {
  --BACKGROUND--CHECKED: var(--digi--form-radiobutton--background-color--secondary);
  --BORDER-COLOR--CHECKED: var(--digi--form-radiobutton--border-color--secondary);
}
:host .digi-form-radiobutton--error .digi-form-radiobutton__input:not(:checked) ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
  --BACKGROUND--CHECKED: var(--digi--form-radiobutton--background-color--error);
  --BORDER-COLOR--CHECKED: var(--digi--form-radiobutton--border-color--error);
}
:host .digi-form-radiobutton--error .digi-form-radiobutton__input ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
  background-color: var(--BACKGROUND--CHECKED);
  border-color: var(--BORDER-COLOR--CHECKED);
  box-shadow: 0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error);
}

.digi-form-radiobutton__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  top: 0;
  left: 0;
}

.digi-form-radiobutton__label {
  display: inline-flex;
  align-items: center;
  gap: var(--digi--gutter--icon);
  font-family: var(--digi--global--typography--font-family--default);
  font-size: var(--digi--typography--body--font-size--desktop);
  color: var(--digi--color--text--primary);
  font-weight: var(--digi--typography--body--font-weight--desktop);
  cursor: pointer;
  margin-bottom: 0.75rem;
}

.digi-form-radiobutton__circle {
  flex-shrink: 0;
  align-self: flex-start;
  cursor: pointer;
  background-color: var(--BACKGROUND--DEFAULT);
  border-color: var(--BORDER-COLOR--DEFAULT);
  border-width: var(--digi--form-radiobutton--border-width);
  border-style: solid;
  height: var(--digi--form-radiobutton--size);
  width: var(--digi--form-radiobutton--size);
  border-radius: var(--digi--form-radiobutton--size);
  position: relative;
  transform: translateY(1px);
}

.digi-form-radiobutton__input:focus-visible ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
  outline: 2px solid black;
  outline-offset: 2px;
  box-shadow: 0px 0px 0px 5px white;
}

.digi-form-radiobutton__input:checked ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
  background-color: var(--BACKGROUND--CHECKED);
  border-color: var(--BORDER-COLOR--CHECKED);
}
.digi-form-radiobutton__input:checked ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle::after {
  content: "";
  width: var(--digi--form-radiobutton--marker--size);
  height: var(--digi--form-radiobutton--marker--size);
  border-radius: var(--digi--form-radiobutton--marker--size);
  background: var(--digi--form-radiobutton--color--marker);
  position: absolute;
  left: calc(50% - var(--digi--form-radiobutton--marker--size) / 2);
  top: calc(50% - var(--digi--form-radiobutton--marker--size) / 2);
}