@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-radio-outer-wrapper') {
  --sky-override-radio-icon-border-radius: 50%;
  --sky-override-radio-icon-color-disabled: #{$sky-color-black};
  --sky-override-radio-icon-color-selected: #{$sky-color-black};
  --sky-override-radio-icon-size: 10px;
  --sky-override-radio-label-margin-right: var(--sky-margin-inline-xs);
}

@include compatMixins.sky-default-host-overrides() {
  --sky-override-radio-group-radio-bottom-margin: var(--sky-margin-stacked-sm);
  --sky-override-radio-hint-text-inset: var(--sky-margin-stacked-xs) 0 0
    calc(var(--sky-switch-size) + var(--sky-switch-margin));
}

@include compatMixins.sky-modern-overrides('.sky-radio-outer-wrapper') {
  --sky-override-radio-icon-color-selected: var(--sky-color-icon-action);
  --sky-override-radio-label-margin-right: var(--sky-margin-inline-xs);
}

:host:has(.sky-switch-control-icon) {
  display: inline-block;
}

:host-context(sky-radio-group):not(:has(li)) {
  :host:not(:has(.sky-switch-control-icon)) {
    display: block;

    &:not(:last-child) {
      margin-bottom: var(
        --sky-override-radio-group-radio-bottom-margin,
        var(--sky-space-gap-form-s)
      );
    }
  }
}

.sky-radio-outer-wrapper {
  display: flex;
}

.sky-radio-help-inline {
  display: inline-flex;
}

.sky-switch:not(:has(~ .sky-control-help-container)) .sky-switch-label {
  margin-right: var(--sky-override-radio-label-margin-right, 0);
}

// "Checked" state inner-circle.
.sky-switch-input:checked
  + .sky-switch-control:not(.sky-switch-control-icon)::after {
  content: '';
  display: inline-block;
  width: var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));
  height: var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));
  background: var(
    --sky-override-radio-icon-color-selected,
    var(--sky-color-icon-inverse)
  );
  border-radius: var(
    --sky-override-radio-icon-border-radius,
    var(--sky-border-radius-round)
  );
}

.sky-radio-input:disabled
  + .sky-switch-control:not(.sky-switch-control-icon)::after {
  background-color: var(
    --sky-override-radio-icon-color-disabled,
    var(--sky-color-text-deemphasized)
  );
}

.sky-radio-hint-text {
  margin: var(
    --sky-override-radio-hint-text-inset,
    var(--sky-space-gap-stacked_supplemental-s) 0 0
      var(--sky-space-inset-switch)
  );
}
