@import "./radio";
@import "./radio.ios.vars";

// iOS Radio
// --------------------------------------------------

:host {
  --color-checked: #{ion-color(primary, base)};
}

:host(.ion-color.radio-checked) .radio-inner {
  border-color: current-color(base);
}

.item-radio.item-ios ion-label {
  @include margin-horizontal(0, null);
}

// iOS Radio Checkmark: Checked
// -----------------------------------------

.radio-inner {
  width: 33%;
  height: 50%;
}

:host(.radio-checked) .radio-inner {
  transform: rotate(45deg);

  border-width: $radio-ios-icon-border-width;
  border-top-width: 0;
  border-left-width: 0;
  border-style: $radio-ios-icon-border-style;
  border-color: var(--color-checked);
}

// iOS Radio: Disabled
// -----------------------------------------
// The radio and label should use the
// same opacity and match the other form
// controls

:host(.radio-disabled) {
  opacity: $radio-ios-disabled-opacity;
}

// iOS Radio: Keyboard Focus
// -----------------------------------------

:host(.ion-focused) .radio-icon::after {
  @include border-radius(var(--inner-border-radius));
  @include position(-8px, null, null, -9px);

  display: block;
  position: absolute;

  width: 36px;
  height: 36px;

  background: $radio-ios-background-color-focused;

  content: "";
  opacity: 0.2;
}

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

.native-wrapper .radio-icon {
  width: $radio-ios-icon-width;
  height: $radio-ios-icon-height;
}