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

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

:host {
  --width: #{$radio-ios-icon-width};
  --height: #{$radio-ios-icon-height};
}


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


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

:host(.radio-checked) .radio-inner {
  @include position(4px, null, null, 7px);

  position: absolute;

  width: 5px;
  height: 12px;

  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: $radio-ios-color-on;
}


// iOS Radio: Disabled
// -----------------------------------------
:host(.radio-disabled) {
  opacity: $radio-ios-disabled-opacity;
}


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

:host(.radio-key) .radio-icon::after {
  @include border-radius(50%);
  @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);
}