@import './config';
@import '../Label/mixins';

.Radio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: $radio-margin;
  position: relative;
}

.Radio-input {
  appearance: none;
  width: $radio-size;
  height: $radio-size;
  display: inline-block;
  border: $radio-border-width solid $radio-border-color;
  background-color: $radio-background-color;
  border-radius: $radio-border-radius;
  margin: $radio-input-margin;
  background-image: svg-url($radio-checked-svg);
  background-repeat: no-repeat;
  background-position: center;
}

.Radio-label {
  @include label;
  margin: 0;
  position: relative;
  display: inline-block;
  max-width: calc(100% - 2rem);
  padding-left: $spacer-xs;
  cursor: default;
  & + .FormGroup-feedback {
    width: 100%;
  }
}

// checked
.Radio-input:checked,
.Radio-input:focus:checked {
  outline: none;
  background-color: $radio-checked-background-color;
  border-color: $radio-checked-border-color;
}

// focused
.Radio-label:focus .Radio-input,
.Radio-input:focus {
  border: 2px solid $color-brand-primary;
  background-color: #fff;
  outline: none;
}

// // disabled
.Radio-input:disabled {
  border-color: $radio-disabled-border-color;
  background-color: $radio-disabled-background-color;
  background-image: none;
}

// errors
.has-error .Radio-input,
.has-error .Radio-input:focus {
  border-color: $color-danger;
  background-color: #ffffff;
  border: 2px solid #e3162b;
  box-shadow: 0 0 4px 0 rgba(237, 41, 65, 0.5);
  outline: none;
}

.has-error .Radio-input:active,
.has-error .Radio-input:checked {
  box-shadow: none;
  background-color: $radio-checked-background-color;
  border-color: $radio-checked-border-color;
}

// MultipleRadios=
.MultipleRadio {
  .Radio:last-child {
    margin-bottom: 0;
  }
}