@import '../../../../../scss/styles';

.radio-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: base(.10) 0;

  input[type=radio] {
    display: none;
  }

  &__styled-radio {
    @include formInput;
    width: $baseline;
    height: $baseline;
    position: relative;
    padding: 0;
    display: inline-block;
    border-radius: 50%;

    &:before {
      content: ' ';
      display: block;
      border-radius: 100%;
      background-color: $color-dark-gray;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 0 base(.1875) white;
      opacity: 0;
    }
  }

  &__label {
    margin-left: base(.5);
  }

  &--is-selected {
    .radio-input {
      &__styled-radio {
        &:before {
          opacity: 1;
        }
      }
    }
  }

  &:not(&--is-selected) {
    &:hover {
      .radio-input {
        &__styled-radio {

          &:before {
            opacity: .2;
          }
        }
      }
    }
  }
}

.radio-group--read-only {
  .radio-input {
    cursor: default;

    &__label {
      color: $color-dark-gray;
    }

    &--is-selected {
      .radio-input__styled-radio {
        &:before {
          background-color: $color-dark-gray;
        }
      }
    }


    &:not(.radio-input--is-selected) {
      &:hover {
        .radio-input__styled-radio {
          &:before {
            opacity: 0;
          }
        }
      }
    }
  }
}
