.radio-container {
  width: 100%;

  & > label {
    position: relative;
    @include display-flex(initial, center);
    cursor: pointer;
    width: 100%;
  }

  input {
    height: 0;
    opacity: 0;
    position: absolute;

    & ~ .radio-display-container {
      width: 100%;
      transition: all ease-in-out 0.3s;
      @include display-flex(flex-start);

      .radio-display {
        @include display-flex(center, center);
        @include full-circle(20px);
        border: 1px solid $light-grey;
        background: $white;
        transition: all ease-in-out 0.3s;
        position: relative;

        &::after {
          position: absolute;
          content: "";
          @include full-circle(10px);
          background: $primary;
          opacity: 0;
          transition: all ease-in-out 0.3s;
        }
      }
    }

    &:checked {
      & ~ .radio-display-container {
        .radio-display {
          border-color: $primary;

          &::after {
            opacity: 1;
          }
        }
      }
    }
  }

  .radio-label {
    margin-left: 16px;

    &--boxed {
      margin-left: 0;
      margin-right: 16px;
    }
  }

  &--boxed {
    input {
      & ~ .radio-display-container {
        border: 1px solid $light-grey;
        background-color: white;
        @include display-flex();
        padding: 14px;
        border-radius: 6px;
      }

      &:checked {
        & ~ .radio-display-container {
          box-shadow: $popper-shadow;
          border-color: $primary;
        }
      }
    }
  }

  &.disabled {
    pointer-events: none;

    &.radio-container--boxed {
      .radio-display-container {
        box-shadow: none;
        background-color: transparent;
        border: 1px solid $light-grey;
      }
    }

    .radio-display {
      background: $light;
      pointer-events: none;
    }

    .radio-label {
      opacity: 0.5;
    }
  }
}