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

:host {
  /**
     * @prop --color: Color of the radio
     */

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

  user-select: none;
  z-index: 1;

  button {
    @include padding(0);
    display: flex;

    align-items: center;

    transition: color 0.25s ease;

    border: none;

    outline: none;

    background-color: transparent;

    line-height: var(--radio-line-height, 1.5);

    cursor: pointer;
  }
}

:host(:focus),
:host(:hover) {
  outline: none;

  button {
    color: $primary_light;
  }
}

.radio-icon {
  @include margin-horizontal(0, var(--radio-icon-margin-right, 0.5em));

  width: var(--radio-icon-size, 1.125em);
  height: var(--radio-icon-size, 1.125em);
}

.radio-icon-inner {
  fill: #ffffff;
  stroke: none;
}

#radioLabel {
  font-family: var(--radio-label-font-family);
  font-size: var(--radio-label-font-size);
}

:host(.radio-checked) {
  .radio-icon-inner {
    fill: $primary_light;
    stroke: none;

    transition: all 0.25s ease;
  }
}

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

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

  .radio-icon-outer {
    fill: none;
    stroke: $neutral_darkest;

    transition: all 0.25s ease;
  }
}