@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/mixins/forms";

$radio-size: 20px;
$icon-size: 10px;
$icon-offset: 4px;

.radioInput {
  @include form-input-visually-hidden();
}
.icon {
  top: $icon-offset;
  left: $icon-offset;
  width: $icon-size;
  height: $icon-size;
  border-radius: 50%;
  background: $kz-color-wisteria-600;
  position: absolute;
}

.box {
  position: relative;
  background: $kz-color-white;
  height: $radio-size;
  width: $radio-size;
  top: 0;
  border: 1px solid $ca-border-color;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.09);
  border-radius: 50%;

  .radioInput:disabled + & {
    background: $kz-color-ash;

    .icon {
      opacity: 0.3;
    }
  }

  .radioInput:focus:not([disabled]) + &,
  .radioInput:hover:focus:not([disabled]) + & {
    @include form-input-focus-border($ca-border-color-focus);
  }

  .radioInput:not([disabled]) + &:hover {
    border-color: $ca-border-color-hover;
  }
}