$radio-size: 1.2em;

.bz-radio-list {
  display: flex;
  flex-direction: column;

  &--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.bz-radio-btn {
  display: inline-block;
  position: relative;
  width: $radio-size;
  height: $radio-size;
  flex-shrink: 0;

  &__outer-circle {
      background-color: $bz-neutral-100;
      border-color: $bz-neutral-400;
      border-width: 1px;
      border-style: solid;
      border-radius: 50%;
      height: $radio-size;
      left: 0;
      position: absolute;
      top: 0;
      transition: border-color ease 280ms;
      width: $radio-size;
  }

  &__inner-circle {
      background-color: $bz-theme-400;
      border-radius: 50%;
      height: $radio-size;
      left: 0;
      position: absolute;
      top: 0;
      transition: transform ease 280ms;
      width: $radio-size;
      transform: scale(.001);
  }
}

.bz-radio {
  display: inline;
  position: relative;
  width: 100%;

  &__label {
    align-items: center;
    clear: both;
    cursor: pointer;
    display: inline-flex;
    padding: $bz-space-inset-s 0;
    position: relative;
    width: 100%;
  }

  &__label-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  &__input {
    display: block;
    float: left;
    font-size: inherit;
    height: 1em;
    margin: 0;
    outline: 0;
    visibility: hidden;
    width: 0;

    &:checked {
      + .bz-radio__label > .bz-radio-btn > .bz-radio-btn__inner-circle {
        transform: scale(.65);
      }
      + .bz-radio__label > .bz-radio-btn > .bz-radio-btn__outer-circle {
        border-color: $bz-theme-400;
      }
    }

    &:disabled {
      + .bz-radio__label {
        color: $bz-neutral-500;
        cursor: not-allowed;
      }

      + .bz-radio__label > .bz-radio-btn > .bz-radio-btn__outer-circle {
        border-color: $bz-neutral-300;
        background-color: $bz-neutral-200;
      }

      + .bz-radio__label > .bz-radio-btn > .bz-radio-btn__inner-circle {
        background-color: $bz-neutral-300;
      }
    }

    &:hover:not(:disabled) {
      + .bz-radio__label > .bz-radio-btn > .bz-radio-btn__outer-circle{
        border-color: $bz-theme-400;
      }
    }
  }
}

//#region Smartphone - Portrait and Landscape
@media only screen and (max-width: 768px) {
  .bz-radio-list--horizontal {
    .bz-radio {
      justify-content: space-between;
      width: 48%;
    }
  }
}
//#endregion

@media only screen and (min-width: 769px) {
  .bz-radio-list--horizontal {
    .bz-radio {
      justify-content: space-between;
      width: 31%;
    }
  }
}