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

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

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

  width: $radio-ios-icon-width;
  height: $radio-ios-icon-height;
}

: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
// -----------------------------------------
: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: .2;
}


// iOS Radio Within An Item
// -----------------------------------------

:host(.in-item) {
  @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);

  display: block;
  position: static;
}

:host(.in-item[slot="start"]) {
  @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start);
}
