.radioGroup--flex {
  display: flex;
  flex-direction: column;
  gap: var(--gap--sm);
}

.radioGroup--flexHorizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--gap--sm);
  column-gap: var(--gap--xl);
}

.radioGroup--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--radioGroup-min-column-width, 160px), 1fr));
  row-gap: var(--gap--md);
  column-gap: var(--gap--md);
}

.radioGroup--gapSm {
  row-gap: var(--gap--sm);
  column-gap: var(--gap--sm);
}

.radioGroup--gapMd {
  row-gap: var(--gap--md);
  column-gap: var(--gap--md);
}

.radioGroup--gapLg {
  row-gap: var(--gap--lg);
  column-gap: var(--gap--lg);
}

.radioGroup--gapXl {
  row-gap: var(--gap--xl);
  column-gap: var(--gap--xl);
}

.radioGroup__imageOption {
  cursor: pointer;

  position: relative;
  z-index: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgb(var(--border--neutral-low-default--light));

  &:focus-within {
    outline: 2px solid rgb(var(--border--controls-medium-selected--light));
    outline-offset: -2px;
    box-shadow: var(--shadow--focus--light);
  }

  & > * {
    z-index: -1;
  }
}

.radioGroup__imageOption__label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.radioGroup__imageOption--checked {
  outline: 2px solid rgb(var(--border--controls-medium-selected--light));
  outline-offset: -2px;
}

.radioGroup__imageOption--disabled {
  cursor: not-allowed;
  opacity: var(--blend--medium--light);
}

.radioGroup__imageOption--error {
  border: 1px solid rgb(var(--border--critical-high-default--light));
  outline: none;

  &:focus-within {
    outline: none;
  }
}

.radioGroup__imageOption--warning {
  border: 1px solid rgb(var(--border--warning-medium-default--light));
  outline: none;

  &:focus-within {
    outline: none;
  }
}

.radioGroup__imageOptionCheckmark {
  position: absolute;
  top: var(--offset--xs);
  right: var(--offset--xs);
  color: rgb(var(--foreground--controls-medium-selected--light));
}

.radioGroup__imageOptionCheckmarkEmpty {
  display: block;

  width: calc(var(--size--xl) - 4px);
  height: calc(var(--size--xl) - 4px);
  margin: 2px;

  background-color: rgb(var(--background--neutral-base-default--light));
  border: 1px solid rgb(var(--border--neutral-low-default--light));
  border-radius: 50%;
}