@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./radio.common";

// Ionic Radio
// --------------------------------------------------

:host {
  --color: #{globals.$ion-border-input-default};
  --color-checked: #{globals.$ion-bg-primary-base-default};
  --border-width: #{globals.$ion-border-size-025};
  --border-style: #{globals.$ion-border-style-solid};
  --border-radius: #{globals.$ion-border-radius-full};
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  @include globals.typography(globals.$ion-body-md-regular);

  min-height: globals.$ion-scale-1200;

  color: globals.$ion-text-default;
}

// Radio Color
// --------------------------------------------------

:host(.ion-color.radio-checked) .radio-icon {
  border-color: globals.current-color(base);

  background-color: globals.current-color(base);
}

// Radio Label
// ----------------------------------------------------------------

:host(.in-item.radio-label-placement-stacked) .native-wrapper {
  @include globals.margin(null, null, globals.$ion-space-250, null);
}

// Radio Native Wrapper
// ----------------------------------------------------------------

.native-wrapper .radio-icon {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

// Ionic Radio Outer Circle: Unchecked
// -----------------------------------------

.radio-icon {
  @include globals.margin(0);
  @include globals.border-radius(var(--border-radius));

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--color);

  background-color: globals.$ion-bg-input-default;
}

// Ionic Radio Inner Circle: Unchecked
// -----------------------------------------

.radio-inner {
  @include globals.border-radius(var(--inner-border-radius));

  width: calc(32% + var(--border-width));
  height: calc(32% + var(--border-width));

  background-color: globals.$ion-bg-surface-inverse;
}

// Ionic Radio Outer Circle: Checked
// -----------------------------------------

:host(.radio-checked) .radio-icon {
  border-color: var(--color-checked);

  background-color: var(--color-checked);
}

// Radio Label Placement - Start & Fixed
// ----------------------------------------------------------------

:host(.radio-label-placement-start) .label-text-wrapper,
:host(.radio-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the radio should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(null, globals.$ion-space-400, null, 0);
}

// Radio Label Placement - End
// ----------------------------------------------------------------

/**
 * The margin between the label and
 * the radio should be on the start
 * when the label sits at the end.
 */
:host(.radio-label-placement-end) .label-text-wrapper {
  @include globals.margin(null, 0, null, globals.$ion-space-400);
}

// Radio Label Placement - Stacked
// ----------------------------------------------------------------

:host(.radio-label-placement-stacked) .label-text-wrapper {
  @include globals.transform(scale(0.75));

  /**
   * The margin between the label and
   * the radio should be on the bottom
   * when the label sits on top.
   */
  @include globals.margin(null, 0, globals.$ion-space-400, 0);

  /**
   * Label text should not extend
   * beyond the bounds of the radio.
   */
  max-width: calc(100% / 0.75);
}

// Radio Not In Item
// -----------------------------------------

:host(:not(.in-item):not(:last-of-type)) {
  @include globals.margin(null, null, globals.$ion-space-200, null);
}

// Ionic Radio: Disabled
// -----------------------------------------

:host(.radio-disabled) .radio-icon::after {
  @include globals.disabled-state();
  @include globals.border-radius(inherit);

  // The border-width is added to the width and height to ensure
  // the disabled state covers the entire radio icon. The top and
  // left are adjusted to ensure the disabled state is centered on
  // the radio icon.
  @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
  width: calc(100% + (2 * var(--border-width)));
  height: calc(100% + (2 * var(--border-width)));
}

// Ionic Radio: Keyboard Focus
// -----------------------------------------

:host(.ion-focused) .radio-icon {
  @include globals.focused-state(var(--focus-ring-width), null, var(--focus-ring-color));
}

// Ionic Radio: Pressed
// -----------------------------------------

:host(.ion-activated) .radio-icon::after {
  @include globals.pressed-state();
  @include globals.border-radius(inherit);

  // The border-width is added to the width and height to ensure
  // the activated state covers the entire radio icon. The top and
  // left are adjusted to ensure the activated state is centered on
  // the radio icon.
  @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
  width: calc(100% + (2 * var(--border-width)));
  height: calc(100% + (2 * var(--border-width)));
}