.ebs-radio__group {
  &.vertical {
    display: flex;
    flex-wrap: wrap;
  }

  &--left {
    .ebs-radio {
      right: inherit;
      left: 0;

      &__text {
        padding-left: rem(26px);
      }
    }
  }

  &--right {
    .ebs-radio {
      left: inherit;
      right: 0;

      &__text {
        padding-right: rem(26px);
        width: rem(160px);
      }
    }
  }

  .ebs-radio__wrapper {
    position: relative;

    &:not(:last-child) {
      margin-bottom: rem(5px);
    }

    &--has-text .ebs-radio {
      position: absolute;
      top: rem(-2px);
    }

    &--disabled {
      .ebs-radio__input {
        cursor: not-allowed;
      }

      .ebs-radio__text {
        color: $grey-500;
      }

      .ebs-radio,
      .ebs-radio__input:hover ~ .ebs-radio {
        background-color: transparent;

        &__dot {
          border: 1px solid $border-color;
          box-shadow: none;
          background-color: transparent;
        }
      }

      .ebs-radio__input:checked ~ .ebs-radio,
      .ebs-radio__input:checked:hover ~ .ebs-radio {
        background-color: transparent;

        &__dot {
          border: 1px solid $grey-500;
          box-shadow: 0px 0px 0px 3px $white inset;
          background-color: $grey-500;
        }
      }
    }
  }

  .ebs-radio__input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;

    &:hover ~ .ebs-radio {
      background-color: var(--primary-100);

      &__dot {
        border-color: var(--primary-color);
        background-color: var(--primary-100);
      }
    }

    &:checked:hover ~ .ebs-radio {
      background-color: var(--primary-100);

      &__dot {
        border-color: var(--primary-color);
        background-color: var(--primary-color);
        box-shadow: 0px 0px 0px 3px var(--primary-100 inset);
      }
    }

    &:checked ~ .ebs-radio .ebs-radio__dot {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      box-shadow: 0px 0px 0px 3px $white inset;
    }
  }

  .ebs-radio {
    transition: all $transition-time;
    width: rem(20px);
    height: rem(20px);
    background-color: transparent;
    pointer-events: none;
    border-radius: 50%;

    &__dot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: rem(16px);
      height: rem(16px);
      border: 1px solid $border-color;
      border-radius: 50%;
      background-color: transparent;
    }

    &__text {
      pointer-events: none;
      color: $text-color;
      font-size: rem(14px);
    }
  }
}
