.el-radio-group {
  @apply block;

  &.radio-button-group {
    .el-radio-button {
      @apply border-gray-200;

      &__original-radio:checked + .el-radio-button__inner {
        @apply bg-primary-50 border-primary-500 text-gray-900;
        box-shadow: -1px 0 0 0 #003778;
      }

      .el-radio-button__inner {
        @apply w-full text-gray-600;
      }

      &:hover .el-radio-button__inner {
        @apply text-primary-500;
      }
    }

    &.is-small {
      .el-radio-button__inner {
        @apply p-2;
      }
    }
  }

  &.radio-chips {
    .el-radio-button {
      @apply mb-3;

      &:not(:last-child){
        @apply mr-3;
      }

      .el-radio-button__inner {
        @apply border border-solid shadow-none border-gray-300 h-10 px-3 rounded-md flex items-center font-normal transition text-black;

        &:hover {
          @apply bg-gray-50 text-black;
        }
      }

      &.is-active {
        .el-radio-button__inner {
          @apply border border-l-primary-500 shadow-none border-primary-500 rounded-md font-medium text-black bg-primary-50;
        }
      }
    }

    &.is-medium {
      .el-radio-button__inner {
        @apply h-8 px-3 py-1.5 text-xs;
      }

    }
  }

  .el-radio {
    @apply block;

    &__label {
      @apply text-2xs text-gray-900;
    }

    .el-radio__input.is-checked + .el-radio__label {
      @apply text-gray-900;
    }

    .el-radio__input.is-checked .el-radio__inner {
      @apply bg-primary-500 border-primary-500;
    }
  }
}
