.control__radio {
  @include flex-center;
  position: relative;
  cursor: pointer;
  user-select: none;

  &-group {
    @include flex-center;

    &:not(:last-child) {
      margin-right: 2rem;
    }
  }

  &-input {
    display: none;
  }

  &-text {
    margin-left: 3.5rem;
  }

  &-icon {
    @include flex-center;
    height: 100%;
    width: 3rem;
    margin-left: 1rem;
  }

  &-element {
    display: inline-block;
    position: absolute;
    height: 2rem;
    width: 2rem;
    border: 3px solid currentColor;
    left: 0;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: 80%;
      width: 80%;
      transform: translate(-50%, -50%);
      display: block;
      opacity: 0;
      transition: opacity 0.2s;
      background-color: currentColor;
    }
    &--rounded {
      border-radius: 50%;

      &::after {
        border-radius: 50%;
      }
    }
  }
}

.control__radio-input:checked ~ .control__radio .control__radio-element::after {
  opacity: 1;
}