@import "../../themes/ionic.globals";

// Radio
// --------------------------------------------------

:host {
  /**
   * @prop --color: Color of the radio
   * @prop --color-checked: Color of the checked radio
   * @prop --border-radius: Border radius of the radio
   * @prop --inner-border-radius: Border radius of the inner checked radio
   */
  --inner-border-radius: 50%;

  display: inline-block;
  position: relative;
  box-sizing: border-box;

  user-select: none;

  z-index: $z-index-item-input;
}

:host(.radio-disabled) {
  pointer-events: none;
}

.radio-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  contain: layout size style;
}

.radio-icon,
.radio-inner {
  box-sizing: border-box;
}

label {
  @include input-cover();

  display: flex;

  align-items: center;

  opacity: 0;
}

input {
  @include visually-hidden();
}

:host(:focus) {
  outline: none;
}
